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INTRODUCTION 


> About this book 
> How the web works 
> Learning from other pages 


Firstly, thank you for picking up this 
book. It has been written with two very 
different types of people in mind: 


^ Those who want to learn how to design and build websites 
from scratch 


* Anyone who has a website (that may be built using a 
content management system, blogging software, or an 
e-commerce platform) and wants more control over the 
appearance of their pages 


The only things you need in order to use this book are a 
computer with a web browser and a text editor (such as 
Notepad, which comes with Windows, or TextEdit, which 
comes with Macs). 


3 INTRODUCTION 


Introduction pages come at the beginning of each 
chapter. They introduce the key topics you will learn 
about. 


Background pages appear on white; they explain the 
context of the topics covered that are discussed in 
each chapter. 


"m 
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Example pages put together the topics you have 
learned and demonstrate how they can be applied 
in each. 


border-width border-style 


Reference pages introduce key pieces of HTML & 
CSS code. The HTML code is shown in blue and CSS 
code is shown in pink. 


Diagram and infographics pages are shown ona 
dark background. They provide a simple, visual 
reference to topics discussed. 


Summary pages come at the end of each chapter. 
They remind you of the key topics that were covered 
in each chapter. 
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IS IT HARD TO LEARN? 


Many books that teach HTML and CSS 
resemble dull manuals. To make it easier for 
you to learn, we threw away the traditional 
template used by publishers and redesigned 


this book from scratch. 


At work, when people look 

at my screen and see it full of 
code, it's not unusual to get a 
comment about it looking very 
complicated or how clever | must 
be to understand it. The truth 

is, it's not that hard to learn how 
to write web pages and read 

the code used to create them; 
you certainly don't have to bea 
"programmer." 


INTRODUCTION 


Understanding HTML and CSS 
can help anyone who works 
with the web; designers can 
create more attractive and 
usable sites, website editors can 
create better content, marketers 
can communicate with their 
audience more effectively, and 
managers can commission 
better sites and get the best out 
of their teams. 


l've focussed on the code you 
need to use 9096 of the time 

and omitted the code that you 
would rarely see even if writing 
websites is your full time job. By 
the end of the book, if you come 
across the other 1096 you will be 
able to Google it to find out what 
it means quickly and easily. 


| have also added practical 
information on topics | am 
commonly asked about, such as 
how to prepare images, audio 
and video for the web, how to 
approach the design and build 
of a new site, how to improve 
your rankings in search engines 
(SEO), and how to use Google 
Analytics to learn about visitors 
to your site. 


THE SIRUCTURE OF 
THIS BOOK 


1: HTML 


We will spend the first chapter 
looking at how HTML is used to 
create web pages. You will see 
that you start by writing down 
the words you want to appear 
on your page. You then add tags 
or elements to the words so 
that the browser knows what is 
a heading, where a paragraph 
begins and ends, and so on. 


The rest of this section 
introduces the tags you have 

at your disposal to create web 
pages, grouped into chapters on: 
text, lists, links, images, tables, 
forms, video audio and flash, and 
miscellaneous elements. 


| should warn you that the 
examples in the first nine 
chapters are not exciting to look 
at, yet they are the foundation of 
every web page. The following 
chapters on CSS will show you 
how to make your pages look a 
lot more interesting. 


In order to teach you about creating web pages, 
this book is divided into three sections: 


2 CSS 


We start this section with a 
chapter that explains how CSS 
uses rules to enable you to 
control the styling and layout 
of web pages. We then go on to 
look at the wide variety of CSS 
properties you can use in your 
CSS rules. These properties 
generally fall into one of two 
categories: 


Presentation: How to control 
things like the color of text, the 
fonts you want to use and the 
size of those fonts, how to add 
background colors to pages (or 
parts of a page), and how to add 
background images. 


Layout: How to control where 
the different elements are 
positioned on the screen. You 
will also learn several techniques 
that professionals use to make 
their pages more attractive. 


5: PRACTICAL 


We end up with some helpful 
information that will assist you in 
building better websites. 


We look at some new tags that 
will be introduced in HTMLS5 to 
help describe the structure of 
your pages. HTML5 is the latest 
version of HTML (still under 
development at the time of 
writing). Before learning about 
these elements, you need a good 
grasp of how CSS is used to 
control the design of web pages. 
There is a chapter that talks you 
through a design process that 
you might like to follow when 
creating a new website. 


Finally, we end up looking at 
topics that will help you once 
you have built your site, such 

as putting it on the web, search 
engine optimisation (SEO) and 
using analytics software to track 
who comes to your site and what 
they are looking at. 
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HOW PEOPLE 


ACCESS IHE WEB 


Before we look at the code used to build 
websites it is important to consider the 
different ways in which people access the web 
and clarify some terminology. 


BROWSERS 


People access websites using 
software called a web browser. 
Popular examples include 
Firefox, Internet Explorer, Safari, 
Chrome, and Opera. 


In order to view a web page, 
users might type a web address 
into their browser, follow a 

link from another site, or use a 
bookmark. 


Software manufacturers 
regularly release new versions 
of browsers with new features 
and supporting new additions 
to languages. It is important, 
however, to remember that 
many computer owners will not 
be running the latest versions 
of these browsers. Therefore 
you cannot rely on all visitors to 
your site being able to use the 
latest functionality offered in all 
browsers. 


You will learn how to tell which 


browsers visitors use to access 
your website in Chapter 19. 
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WEB SERVERS 


When you ask your browser for 
a web page, the request is sent 
across the Internet to a special 
computer known as a web 
server which hosts the website. 


Web servers are special 
computers that are constantly 
connected to the Internet, and 
are optimized to send web pages 
out to people who request them. 


Some big companies run their 
own web servers, but it is more 
common to use the services of 
a web hosting company who 
charge a fee to host your site. 


DEVICES 


People are accessing websites 
on an increasing range of devices 
including desktop computers, 
laptops, tablets, and mobile 
phones. It is important to 
remember that various devices 
have different screen sizes and 
some have faster connections to 
the web than others. 


SCREEN READERS 


Screen readers are programs 
that read out the contents of a 
computer screen to a user. They 
are commonly used by people 
with visual impairments. 


In the same way that many 
countries have legislations 

that require public buildings 

to be accessible to those with 
disabilities, many laws have 
also been passed that require 
websites be accessible to those 
with disabilities. 


Throughout this book you will 
see several references to screen 
readers. These notes will help 
ensure that the sites you create 
are accessible to people who use 
such software. 


It is interesting to note that 
technologies similar to those 
employed by screen readers are 
also being used in other areas 
where people are unable read a 
screen, such as when they are 
driving or jogging. 


WHAT YOU SEE 


When you are looking at a 
website, it is most likely that 
your browser will be receiving 
HTML and CSS from the web 
server that hosts the site. The 
web browser interprets the 
HTML and CSS code to create 
the page that you see. 


Most web pages also include 
extra content such as images, 
audio, video, or animations and 
this book will teach you how to 
prepare them for use on the web 
and then how to insert them into 
your web pages. 


Some sites also send JavaScript 
or Flash to your browser, and you 
will see how to add JavaScript 
and Flash in your web pages. 
Both of these technologies are 
advanced topics that you can go 
on to learn more about once you 
have mastered HTML and CSS, if 
you want to. 


HOW WEBSITES 
ARE CREATED 


All websites use HTML and CSS, but content 
management systems, blogging software, and 
e-commerce platforms often add a few more 


technologies into the mix. 


HOW IT IS CREATED 


Small websites are often written 
just using HTML and CSS. 


Larger websites — in particular 
those that are updated regularly 
and use a content management 
system (CMS), blogging tools, or 
e-commerce software — often 
make use of more complex 
technologies on the web server, 
but these technologies are 
actually used to produce HTML 
and CSS that is then sent to the 
browser. So, if your site uses 
these technologies, you will be 
able to use your new HTML and 
CSS knowledge to take more 
control over how your site looks. 


Larger, more complex sites like 
these may use a database to 
store data, and programming 
languages such as PHP, ASP.Net, 
Java, or Ruby on the web server, 
but you do not need to know 
these technologies to improve 
what the user sees. The skills 
you'll learn in this book should be 
enough to help you on that road. 


HTML5 & CSS3 


Since the web was first created 
there have been several versions 
of HTML and CSS — each 
intended to be an improvement 
on the previous version. 


At the time of writing this 
book, HTML5 & CSS3 were 
still being developed. Although 
they had not been finalized, 
many browsers were already 
supporting some features of 
these languages and a lot of 
people were using the latest 
code on their websites. | have 
therefore chosen to teach you 
these latest versions. 


Because HTML5 and CSS3 

build on previous versions of 
these languages, learning these 
means you will also be able to 
understand the earlier versions 
of them. | have added clear notes 
when the code is new and also 
when it might not work in older 
browsers. 


INTRODUCTION 


HOW IHE WEB WORKS 


When you visit a website, the web server 
hosting that site could be anywhere in the 
world. In order for you to find the location of 
the web server, your browser will first connect 
to a Domain Name System (DNS) server. 


^m 


On this page you can see 
examples that demonstrate 
how the web server that hosts 
the website you are visiting can 
be anywhere in the world. It is 
the DNS servers that tell your 


browser how to find the website. 


o INTRODUCTION 


Q ^ user in Barcelona visits 
sony.jp in Tokyo 


Q ^ user in New York visits 
google.com in San Francisco 


(9 A user in Stockholm visits 
qantas.com.au in Sydney 


Q ^ user in Vancouver visits 
airindia.in in Bangalore 


On the right you can see what 
happens when a web user in 
England wants to view the 
website of the Louvre art gallery 
in France which is located at 
www. louvre.fr. Firstly, the 
browser in Cambridge contacts 
a DNS server in London. The 
DNS server then tells the 
browser the location of the web 
server hosting the site in Paris. 


When you connect to the web, 
you do so via an Internet Service 
Provider (ISP). You type a 
domain name or web address 
into your browser to visit a site; 
for example: google.com, 
bbc.co.uk, microsoft.com. 


The unique number that the 
DNS server returns to your 
computer allows your browser 
to contact the web server 

that hosts the website you 
requested. A web server is a 
computer that is constantly 
connected to the web, and is set 
up especially to send web pages 
to users. 


Your computer contacts a 
network of servers called 
Domain Name System (DNS) 
servers. These act like phone 
books; they tell your computer 
the IP address associated with 
the requested domain name. 
An IP address is a number 

of up to 12 digits separated 

by periods / full stops. Every 
device connected to the web 
has a unique IP address; it is 
like the phone number for that 
computer. 


Cambridge 
LONDONS*zá 


< 


The web server then sends the 
page you requested back to your 
web browser. 


SIRUCTURE 


> Understanding structure 
> Learning about markup 
> Tags and elements 
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We come across all kinds of documents 
every day of our lives. Newspapers, 
insurance forms, shop catalogues... the 
list goes on. 

Many web pages act like electronic versions of these 
documents. For example, newspapers show the same stories 
in print as they do on websites; you can apply for insurance 


over the web; and stores have online catalogs and e-commerce 
facilities. 


In all kinds of documents, structure is very important in helping 
readers to understand the messages you are trying to convey 
and to navigate around the document. So, in order to learn how 
to write web pages, it is very important to understand how to 
structure documents. In this chapter you will: 


See how HTML describes the structure of a web page 
Learn how tags or elements are added to your document 


Write your first web page 


STRUCTURE 


tk Safari file Edit View History &ookmarks Develop Window _ Help. E OO t E « ni? Q 


ane herp) / www.htmlandcs book com/code/chapter-01/ example Mmi 
EI A | | + [€ nna jr ntrmiandessbook com code /chapter-01/example ntm 


This is the Main Heading 
This text magh be an istroduction to the rest of the page. And if the page is a long one it magh be split up isto several uib-beadings. 
This is a Sub-Heading 


Many long articles have sub-headings so to heip you follow the stracture of what is being written. There may even be sub-sub-beaings (or lower-level 
headings) 


Another Sub-Heading 


Here you can see another sob-heading. 


MacBook Pro 
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HOW PAGES USE 
SIRUCTURE 


Think about the stories you 

read in a newspaper: for each 
story, there will be a headline, 
some text, and possibly some 
images. If the article is a long 
piece, there may be subheadings 
that split the story into separate 
sections or quotes from those 
involved. Structure helps readers 
understand the stories in the 
newspaper. 


STRUCTURE 


The structure is very similar 
when a news story is viewed 
online (although it may also 
feature audio or video). This is 
illustrated on the right with a 
copy of a newspaper alongside 
the corresponding article on its 
website. 


Now think about a very different 
type of document — an 
insurance form. Insurance forms 
often have headings for different 
sections, and each section 
contains a list of questions with 
areas for you to fill in details or 
checkboxes to tick. Again, the 
structure is very similar online. 


Read moreon Digital economy or bust Coming up this week | 
MediaGuardian.co.uk Mono 
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is the only scalable 
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s, how do you do that 
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STRUCTURING WORD 
DOCUMENTS 


The use of headings and 
subheadings in any document 
often reflects a hierarchy of 
information. For example, a 
document might start with 

a large heading, followed by 
an introduction or the most 
important information. 


STRUCTURE 


This might be expanded upon 
under subheadings lower down 
on the page. When using a word 
processor to create a document, 
we separate out the text to give 
it structure. Each topic might 
have a new paragraph, and each 
section can have a heading to 
describe what it covers. 


On the right, you can see a 
simple document in Microsoft 
Word. The different styles for 
the document, such as different 
levels of heading, are shown 

in the drop down box. If you 
regularly use Word, you might 
have also used the formatting 
toolbar or palette to do this. 


@ Word File Edit View Insert Format Font Tools Table Window Work Help 
Normal Vv Helvetica msi 


Clear Formatting 
Heading 1 structure.doc 
Heading 2 


Heading 3 


Normal 


This is the Main Heading 


This text might be an introduction to the rest of the page. And if the page is a 
long one it mightpe spiit up into several sub-headings 


Detank Porngragh Font This is a Sub-Heading 


Many long articles have sub-headings so to help you follow the structure of what 
is being written. There may even be sub-sub-headings (or lower-level headings) 


Another Sub-Heading 


Here you can see another sub-heading 


At4T7om ing Col 19 


STRUCTURE 18 


—— On the previous page you saw 
how structure was added to 
a Word document to make it 
easier to understand. We use 
structure in the same way when 
writing web pages. 


Safari File Edit View History Bookmarks Develop Window Help 


hitp://www.htmlandessbook.com/code/chapter-01/example.htmi 
aje ELEJO nito www. htmilandcssbook.com/code/chapter-01/example.htm! 


This is the Main Heading 


This text might be an introduction to the rest of the page. And if the page is a long onc it might be split up into several sub-headings. 


This is a Sub-Heading 


Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level 
headings). 


Another Sub-Heading 


Here you can sce another sub-heading. 


MacBook Pro 
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HIML DESCRIBES 
THE SIRUCTURE 
OF PAGES 


In the browser window you can see a web page that features exactly 

the same content as the Word document you met on the page 18. To 
describe the structure of a web page, we add code to the words we want 
to appear on the page. 


You can see the HTML code for this page below. Don't worry about what 
the code means yet. We start to look at it in more detail on the next 
page. Note that the HTML code is in blue, and the text you see on screen 
is in black. 


<html> 
<body> 

<hl>This is the Main Heading</h1> 

<p>This text might be an introduction to the rest of 
the page. And if the page is a long one it might 
be split up into several sub-headings.<p> 

<h2>This is a Sub-Heading</h2> 

<p>Many long articles have sub-headings so to help 
you follow the structure of what is being written. 


There may even be sub-sub-headings (or lower-level 
headings) .</p> 
<h2>Another Sub-Heading</h2> 
<p>Here you can see another sub-heading.</p> 
</body> 
</html> 


The HTML code Cin blue) is made up of characters that live inside angled 
brackets — these are called HTML elements. Elements are usually 
made up of two tags: an opening tag and a closing tag. (The closing tag 
has an extra forward slash in it.) Each HTML element tells the browser 
something about the information that sits between its opening and 
closing tags. 
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HIML USES ELEMENTS 
TO DESCRIBE THE 
SIRUCTURE OF PAGES 


Let's look closer at the code from the last page. 
There are several different elements. Each 
element has an opening tag and a closing tag. 


CODE 


«html» 


<body> 


<hl>This is the Main Heading</h1> 


<p>This text might be an introduction to the rest of 


the page. And if the page is a long one it might 
be split up into several sub-headings.<p> 


<h2>This is a Sub-Heading</h2> 


<p>Many long articles have sub-headings so to help 
you follow the structure of what is being written. 


There may even be sub-sub-headings (or lower-level 
headings).</p> 


<h2>Another Sub-Heading</h2> 
<p>Here you can see another sub-heading.</p> 


</body> 


</html> 


e STRUCTURE 


Tags act like containers. They tell you 
something about the information that lies 
between their opening and closing tags. 


DESCRIPTION 


306B08cooobedoodóoobadbod The <body> tag indicates that anything between it and the closing IDEE 
</body> tag should be shown inside the main browser window. : 
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A CLOSER LOOK AT TAGS 


CHARACTER 


RIGHT-ANGLE BRACKET 
(MORE-THAN SIGN) 


LEFT-ANGLE BRACKET 
(LESS-THAN SIGN) 


LL OPENING TAG ———————— ——3À 


The characters in the brackets For example, in the tags above The closing tag has a forward 
indicate the tag's purpose. the p stands for paragraph. slash after the the < symbol. 
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CHARACTER 


RIGHT-ANGLE BRACKET 
(MORE-THAN SIGN) 


LEFT-ANGLE BRACKET : 
(LESS-THAN SIGN) 


FORWARD SLASH 


L___ CLOSING TAG. ——————— —— —— —— —À 


The terms "tag" and "element" Strictly speaking, however, an tag and the closing tag and any 
are often used interchangeably. element comprises the opening content that lies between them. 
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ATTRIBUTES TELL US 
MORE ABOUT ELEMENTS 


Attributes provide additional information 
about the contents of an element. They appear 
on the opening tag of the element and are 
made up of two parts: a name and a value, 
separated by an equals sign. 


ATTRIBUTE 
NAME 


a 


<p lang="en-us">Paragraph in English</p> 


o 


ATTRIBUTE 
VALUE 
The attribute name indicates The value is the information Here an attribute called lang is 
what kind of extra information or setting for the attribute. It used to indicate the language 
you are supplying about the should be placed in double used in this element. The value 
element's content. It should be quotes. Different attributes can of this attribute on this page 
written in lowercase. have different values. specifies it is in US English. 
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ATTRIBUTE 
NAME 


r2 


HTMLS5 allows you to use 
uppercase attribute names and 
omit the quotemarks, but this is 
not recommended. 


<p lang="fr">Paragraphe en Francais</p> 


—— 


ATTRIBUTE 
VALUE 


The majority of attributes can 
only be used on certain 
elements, although a few 
attributes (such as lang) 

can appear on any element. 


Most attribute values are 
either pre-defined or follow a 
stipulated format. We will look 
at the permitted values as we 
introduce each new attribute. 


The value of the lang attribute 
is an abbreviated way of 
specifying which language is 
used inside the element that 
all browsers understand. 
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BODY, HEAD & TITLE 


<body> 


You met the <body> element 

in the first example we created. 
Everything inside this element is 
shown inside the main browser 
window. 


<head> 


Before the <body> element you 


will often see a <head> element. 


This contains information 

about the page (rather than 
information that is shown within 
the main part of the browser 
window that is highlighted in 
blue on the opposite page). 

You will usually find a <title> 
element inside the <head> 
element. 


<title> 


The contents of the <title> 
element are either shown in the 
top of the browser, above where 
you usually type in the URL of 
the page you want to visit, or 

on the tab for that page (if your 
browser uses tabs to allow you 
to view multiple pages at the 
same time). 


STRUCTURE 


/chapter-01/body-head-title.html HTML 


«html» 
<head> 
<title>This is the Title of the Page</title> 
</head> 
<body> 
<hl>This is the Body of the Page</h1> 
<p>Anything within the body of a web page is 
displayed in the main browser window.</p> 
</body> 
</html> 


This is the Body of the Page 


Anything within the body of a web page is displayed in the main browser window, 


Anything written between the 
«title» tags will appear in the 
title bar Cor tabs) at the top of 
the browser window, highlighted 
in orange here. 


IIIIIIIIITIIIITIN 


Ls e | LETO nnp://mmiandcssbook.com/code/chapter-Ol/body-head-titehtmt carce —— 


This is the Body of the Page 


Anything within the body of a web page is displayed in the main browser window. 


You may know that HTML 
stands for HyperText Markup 
Language. The HyperText part 
refers to the fact that HTML 
allows you to create links that 
allow visitors to move from one 


page to another quickly and 
easily. A markup language allows 
you to annotate text, and these 
annotations provide additional 
meaning to the contents of a 
document. If you think of a web 


Anything written between 
the «body? tags will appear 
in the main browser window, 
highlighted in blue here. 


page, we add code around the 
original text we want to display 
and the browser then uses 

the code to display the page 
correctly. So the tags we add are 
the markup. 
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CREATING A WEB PAGE 
ON A PC 


To create your first web page on 


a PC, start up Notepad. You can Q 
find this by going to: 


|| db. set Progam Access and petats (C) Asbity 


Is 
Start - 
I—— i) Addis Book 
All Programs (or Programs) FTN em rpm 
Accessories irm, uus [o mmm Tm 
Qd = 
Notepad y re io qe 
* shied sime a = ? S Tour Windom dP 
5 - E Ge -Speed internet TA 
You might also like to download [ej temetetedtoo | ire ghee E wodor pere 
^ A wedd 
a free editor called Notepad++ EARS B Soror itd Citra Vd 
from notepad-plus-plus.org. e were Hg tese eum 
DET 
—— EN V) Geo Systems VPN Cher. r 
epe © Mecromeds , 


Type the code shown on the 


right. e 


d. 
Fle Ede Format Wew Heb 
<html> 
<head> 
<titleomy First web Page</title> 


</head> 


<body> 
«hl»welcume to My First Web Pagec/hi» 
<p>This is an MTML page I created in worepad. «/p» 


E 
</html> 
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My Documents 


My Computer 


i 
F 
ih. 


wik Swn —— —— m 


Guy First Web Page -MezWafiredox ———— — 
D Ek yem Moy Bookmarks Tode Deb 
8 -C GY (LO PfifcciDocuments and Settings) 


(| My First Web Page 


Welcome to My First Web Page 


This i an HTML page I created in Notepad 


i 


Go to the File menu and select 
Save as... You will need to save 
the file somewhere you can 
remember. If you like, you could 
create a folder for any examples 
that you try out from this book. 


Save this file as first-test. 
html. Make sure that the Save 
as type drop down has All Files 
selected. 


Start your web browser. Go to 
the File menu and select Open. 
Browse to the file that you just 
created, select it and click on the 
Open button. The result should 
look something like the screen 
shot to the left. 


If it doesn't look like this, find 
the file you just created on your 
computer and make sure that it 
has the file extension .html Cif 
itis .txt then you need to go 
back to Notepad and save the 
file again, but this time put quote 
marks around the name "first- 
test.html"). 
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CREATING A WEB PAGE 
ON A MAC 


To create your first web page on 


a Mac, start up TextEdit. This e 
should be in your Applications ene (ar Applications e 
folder. EmA Em ? [ 
* DEVICES © Paparazzi! ^ *Preview- 
+ sanen gne 
You might also like to download tes ciis Eh 
j i Desktop & RazorSQL 
a free text editor for creating paien EP Seri: 
web pages called TextWrangler Applications ey De...onnection 
h à à 45 Sites 
which is available from (' Docente Gi screen-scr.. sic edition 
Orc Lee re 
= 
barebones.com. cedem Ei - ae 
Created 27/06/2009 07:06 
ae d im [ Modihed 27/06/2009 67:06 
21 System Preferences - — ip is 
Pictures TexrEdi 5 
OS | 


Type the code shown on the 


right. e 


<titlestly First Web Page</title> 


«hüsMelcome to ty First Web Poge«/his- 
«psmhis is an HTML poge that I created in TextEdit.</p> 


: 


mta» 


31 STRUCTURE 


ae i > - m 
tal» 
d x 
* Save As: first-test.htmi a 
«eod». 
P Se = ————— 
P [a lm =n le — = — - —— 
«tà * DEVICES nie You have used the extension “html” at the end 
e M iode om (00 fj of the name. The standard extension is "bx". 
veces wo} You can choose to use the standard extension instead. 
* SHARED Use .txt ¢ ` 
* PLACES osa) V 
C WTML 6 CSS Book — á 
AÀ Applications ‘ 


Plain Text Encoding: | Unicode (UTF-8) 


V If no extension is provided, use "txt". 


Citiseemension: (New folder) 


Cancel ) 


My First Web Page 
© file:// l'Users/Jon/Desktop/fiest-test.ntm! 


| Welcome to My First Web Page 


| This is an HTML page that I created in TextEdit. 


Now go to the File menu and 
select Save as... You will need to 
save the file somewhere you can 
remember. 


If you like, you could create a 
folder for any examples that you 
try out from this book. Save this 
fileas first-test.html. You 
will probably see a window like 
the screen shot to the left. 


You want to select the Use .html 
button. 


Next, start your web browser, 
go to the File menu, and select 
Open. You should browse to the 
file that you just created, select 
it and click on the Open button. 
The result should look like the 
screen shot to the left. 


If it doesn't look like this, you 
might need to change one of 
the settings in TextEdit. Go to 
the TextEdit menu and select 
Preferences. Then on the 
preferences for Open and Save, 
tick the box that says Ignore rich 
text commands in HTML files. 
Now try to save the file again. 
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93 


CODE IN A CONTENT 
MANAGEMENT SYSTEM 


mm [+] | http://www. ssaperraKi np co. /orta-idely- Kochen, — 
Your shopping bag i$ empty E- 3 


VISITING SNAPE 
Shop Eat Discover 


PROPERTY 
Residential 


APT ey 


v behind Ue scomer look 


ONLINE ly b 
Holiday Shop online Alesis bloy 


Sue and the team have done a fantastic job of the new 
collection by Orla Kiely which arrived yesterday 
afternoon. It looks stunning in our kitchen area of House 
& Garden and it was selling as they unpacked it! Itisa 
very stylish retro collection which is well made with good 
lines so I am sure it will be well received by our 
customers. 


| Orla Kiely kitchenware 


Posted on Jome 7, 2004 
tes. eee | 
Chocolates - it is so dangerous because they are 
devastingly good! I bought a small bar of the sea salt 
Y e . .q9* chocolates then went to the visit our Gallery and The Shop 
on the Quay and on the way back I bought a second bar. 
So if you need to treat a friend or someone in the family, 


Speaking of new products, we are now selling Rococo 


If you are working with a content 
management system, blogging 
platform, or e-commerce 
application, you will probably 
log into a special administration 
section of the website to control 
it. The tools provided in the 
administration sections of these 
sites usually allow you to edit 
parts of the page rather than 
the entire page, which means 
you will rarely see the «html», 
<head>, or <body> elements. 


Looking at the content 


management system on the 
opposite page, you have a box 


STRUCTURE 


SSS 


then Rococo Chocolates 


that allows you to enter a title 
for the page, another box for the 
main article, a way to enter a 
publication date, and something 
to indicate which section of the 
site this page belongs in. 


For an e-commerce store, you 
might have boxes that allow you 
to enter a title for the product, 

a description of the product, its 
price, and the quantity available. 


That is because they use a single 
‘template’ to control all of the 
pages for a section of the site. 
(For example, an e-commerce 


take a gift to a dinner party or if you are a house guest - vi 
uranswer. Enjoy. * 


system might use the same 
template to show all of their 
products.) The information 
you supply is placed into the 
templates. 


The advantage of this approach 
is that people who do not know 
how to write web pages can 
add information to a website 
and it is also possible to change 
the presentation of something 
in the template, and it will 
automatically update every page 
that uses that template. If you 
imagine an e-commerce store 
with 1,000 items for sale, just 


Edit Post « Snape Maltings — WordPress 


(f Snape Maltings 
I 
Q Dashboard E * 
= J^ Edit Post 
mf *. Orla Kiely Kitchenware 
Posts. 
| Add Mw Permalink: http: / /www.snapematings.co.uk/uncategorized/In- Stck -mow-o. ly 
| me kiteherware/ Edit ViewPost — Cet Shortlink 
'egories 
| D Upload/insert © G mo Visual HTML 
f Events b / Unk b-quote dei ins img ul of | code more lookup 
& Media iren 
| @ Links «img alt="Orla Kiely kitchenware” src="images/ok-kitchenware jpg” 
width="500" height="375" /> 
| © Pages 
| © Comments <p>Sue and the team have done a fantastic job of the new collection by 
| Orla Kiely which arrived yesterday afternoon. It looks stunning in our 
| kitchen area of House &amp; Carden and it was selling as they unpacked it! 
| Ej Appearance It is a very stylish retro collection which is well made with good lines so | 
| &% Plugins o am sure it will be well received by our customers.«/p» 
FE 
| 8, Users <p>Speaking of new products, we are now selling Rococo Chocolates - it is 
T) Toots so dangerous because they are devastingly good! | bought a small bar of 
e the sea salt chocolates then went to the visit our Callery and The Shop on 
| [B] Settings the Quay and on the way back | bought a second bar. So if you need to 
treat a friend or someone in the family, take a gift to a dinner party or if 
Contact you are a house guest - then Rococo Chocolates are your answer. = 
| Enjoy. </p> 
Word count: 151 Draft saved at 11:16:51 pm. Last edited an June 7, 2011 at 1:03 pm 


Lt | | List] © nito: www. snapemaitings.co.uk/ Chea ë 3 


Publish 
Preview Changes. 
Status. Published Egit 


Visibilty: Public Edit 
(0 Published or Jun 7, 2011 @ 1303 fan 


Move to Trash Update 


Categories. 
AI Categories Most Used. 


© Uncategorized. 
O Blog 


l 


are adding HTML code to your 
text, just like the code you have 
seen earlier in this chapter. 
Many of these editors will have 
an option that allows you to see 
(and edit) the code that they 
produce. 


altering one template is a lot 
easier than changing the page 
for each individual product. 

In systems like this, when 

you have a large block of text 
that you can edit, such as a 
news article, blog entry or the 
description of a product in an 
Once you know how to read and 
edit this code, you can take more 
control over these sections of 
your website. 


e-commerce store, you will often 
see a text editor displayed. 


Text editors usually have 
controls a little like those on 
your word processor, giving 
you different options to style 


In the example above, you can 
see that the text editor has a tab 


text, add links or insert images. 
Behind the scenes these editors 


for Visual / HTML views of what 
the user enters. Other systems 


might have a button (which 
often shows angle brackets) to 
indicate how to access the code. 


Some content management 
systems offer tools that also 
allow you to edit the template 
files. If you do try to edit 
template files you need to check 
the documentation for your CMS 
as they all differ from each other. 
You need to be careful when 
editing template files because 

if you delete the wrong piece of 
code or add something in the 
wrong place the site may stop 
working entirely. 
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LOOKING AT HOW OTHER 
SITES ARE BUILT 


When the web was first taking 
off, one of the most common 
ways to learn about HTML and 
discover new tips and techniques 
was to look at the source code 
that made up web pages. 


These days there are many 

more books and online tutorials 
that teach HTML, but you can 
still look at the code that a web 
server sends to you. To try this 
out for yourself, simply go to the 
sample code for this chapter, at 
www.htmlandcssbook.com/ 
code/ and click on the link called 
"View Source." 
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Once you have opened this 

page, you can look for the View 
menu in your browser, and select 
the option that says Source or 
View source. (The title changes 
depending on what browser you 
are using.) 


You should see a new window 
appear, and it will contain the 
source code that was used to 
create this page. 


You can see this result in the 
photograph on the right. The 
page you see is the window at 
the top; the code is below. 


At first this code might look 
complicated but don't be 
discouraged. By the time you 
have finished the next chapter 
of this book, you will be able to 
understand it. 


All of the examples for this book 
are on the website, and you can 
use this simple technique on any 
of the example pages to see how 
they work. 


You can also download all of 
the code for this book from the 
same website by clicking on the 
"Download" link. 


Hide Toolbar Lil - = 
Customize Toolbar. E View the Source of This Page 
Js] nto //ntmiandcssbook.com/code/chapter-01/view-source.htmi 


Show Bookmarks Bar $8 


Sow Tas ar "t B How to View the Source of This Page 


Hide Status Bar 


Reload Page If you go to your web browser's View menu, you will see an option that allows you to see the source code behind a web page. 


When the web was first taking off this was a very popular way for people to leam how web pages had been built 
Zoom In s Today, people still often view the source of pages to kam how a web page has been built. 


Zoom Out 
¥ Zoom Text Only 


Text Encoding 


Source of http;/ /htmiandcssbook.com/code/chaprer-01/view-source, htm! 


<Litleoview the Source of This Page/title> 


«body» 
«hisHov to View the Source of This Poge«/his- 
«polf you go to your web brovser's View benu, you will see on option that allows you to see the source code behind o web poge </p> 
«polfhen the web vas first taking off this vos o very popular way for people to Learn how web pages hod been bulit.«/p» 
«poToday, people still often view the source of pager to Learn hou a web page hos been bulit.«/p» 


MacBook Pro 
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SUMMARY 
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HTML pages are text documents. 


HTML uses tags (characters that sit inside angled 
brackets) to give the information they surround special 
meaning. 


Tags are often referred to as elements. 


Tags usually come in pairs. The opening tag denotes 
the start of a piece of content; the closing tag denotes 
the end. 


Opening tags can carry attributes, which tell us more 
about the content of that element. 


Attributes require a name and a value. 


To learn HTML you need to know what tags are 
available for you to use, what they do, and where they 
can go. 


> Headings and paragraphs 
> Bold, italic, emphasis 
> Structural and semantic markup 


41 


MEXT 


When creating a web page, you add tags 
(known as markup) to the contents of the 
page. These tags provide extra meaning 
and allow browsers to show users the 
appropriate structure for the page. 

In this chapter we focus on how to add markup to the text that 
appears on your pages. You will learn about: 


® Structural markup: the elements that you can use to 
describe both headings and paragraphs 


® Semantic markup: which provides extra information; such 
as where emphasis is placed in a sentence, that something 
you have written is a quotation (and who said it), the 
meaning of acronyms, and so on 


\ 
POUDRE D'IRIS `) 
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HEADINGS 


<h1> 
<h2> 
So 
<h4> 
<h5> 
SD 


HTML has six "levels" of 
headings: 


<h1> is used for main headings 
<h2> is used for subheadings 


If there are further sections 
under the subheadings then the 
<h3> element is used, and so 
Ore 


Browsers display the contents of 
headings at different sizes. The 
contents of an <h1> element is 
the largest, and the contents of 
an <h6> element is the smallest. 
The exact size at which each 
browser shows the headings 
can vary slightly. Users can also 
adjust the size of text in their 
browser. You will see how to 
control the size of text, its color, 
and the fonts used when we 
come to look at CSS. 


TEXT 


chapter-02/headings.html 


<hl>This is a 
<h2>This is a Level 
<h3>This is a Level 3 
<h4>This is a Level 4 
<h5>This is a Level 5 
<h6>This is a Level 6 


This is a Main Heading 
This is a Level 2 Heading 


This is a Level 3 Heading 
This is a Level 4 Heading 


This is a Level 5 Heading 


This is a Level 6 Heading 


Main Heading</h1> 

2 Heading</h2> 
Heading</h3> 
Heading</h4> 
Heading</h5> 
Heading</h6> 


PARAGRAPHS 


HTML chapter-02/paragraphs.html Sp 


<p>A paragraph consists of one or more sentences 


that form a self-contained unit of discourse. The To create a paragraph, surround 

start of a paragraph is indicated by a new the words that make up the 

line.</p> paragraph with an opening <p> 
<p>Text is easier to understand when it is split up tag and closing </p> tag. 

into units of text. For example, a book may have 

chapters. Chapters can have subheadings. Under By default, a browser will show 

each heading there will be one or more each paragraph on a new line 

paragraphs.</p> with some space between it and 


any subsequent paragraphs. 


A paragraph consists of one or more sentences that form a 
self-contained unit of discourse. The start of a paragraph is 
indicated by a new line. 


Text is easier to understand when it is split up into units of 
text. For example, a book may have chapters. Chapters can 
have subheadings. Under each heading there will be one or 
more paragraphs. 
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BOLD & ITALIC 


<b> 


By enclosing words in the tags 
<b> and </b> we can make 
characters appear bold. 


The <b> element also represents 
a section of text that would be 
presented in a visually different 
way (for example key words ina 
paragraph) although the use of 
the <b> element does not imply 
any additional meaning. 


<i> 
By enclosing words in the tags 


<i> and </i> we can make 
characters appear italic. 


The <i> element also represents 
a section of text that would be 
said in a different way from 
surrounding content — such as 
technical terms, names of ships, 
foreign words, thoughts, or other 
terms that would usually be 
italicized. 
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chapter-02/bold.html 


<p>This is how we make a word appear <b>bold.</b> 


</p> 


<p>Inside a product description you might see some 


<b>key features</b> in bold.</p> 


This is how we make a word appear bold. 


Inside a product description you might see 


some key features in bold. 


chapter-02/italic.html 


<p>This is how we make a word appear <i>italic</i>. 


</p> 


<p>It's a potato <i>Solanum teberosum</i>.</p> 
<p>Captain Cook sailed to Australia on the 


<i>Endeavour</i>.</p> 


This is how we make a word appear italic. 


It's a potato Solanum teberosum. 


Captain Cook sailed to Australia on the Endeavour. 


SUPERSCRIPT & 
SUBSCRIPT 


HTML chapter-02/superscript-and-subscript.html < S u p> 


<p>On the 4<sup>th</sup> of September you will learn 


about E=MC<sup>2</sup>.</p> The <sup> element is used 
<p>The amount of CO<sub>2</sub> in the atmosphere to contain characters that 
grew by 2ppm in 2009<sub>1</sub>.</p> should be superscript such 


as the suffixes of dates or 
mathematical concepts like 
raising a number to a power such 
as 27. 


Sum «sub» 


On the 4" of September you will learn about E=MC?. 


The <sub> element is used to 
contain characters that should 
be subscript. It is commonly 
used with foot notes or chemical 
formulas such as H,O. 


The amount of CO; in the atmosphere grew by 2ppm in 2009,. 
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WHITE SPACE 


In order to make code easier to 
read, web page authors often 
add extra spaces or start some 
elements on new lines. 


When the browser comes across 
two or more spaces next to each 
other, it only displays one space. 
Similarly if it comes across a line 
break, it treats that as a single 
space too. This is known as 
white space collapsing. 


You will often see that web page 
authors take advantage of white 
space collapsing to indent their 
code in order to make it easier 
to follow. 
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chapter-02/white-space.html HTML 
<p>The moon is drifting away from Earth.</p> 
<p>The moon is drifting away from Earth.</p> 


<p>The moon is drifting away from 


Earth.</p> 


The moon is drifting away from Earth. 
The moon is drifting away from Earth. 


The moon is drifting away from Earth. 


LINE BREAKS & 
HORIZONTAL RULES 


HTML chapter-02/line-breaks.html <b r I> 


<p>The Earth<br />gets one hundred tons heavier 

every day<br /»due to falling space dust.</p> As you have already seen, the 
browser will automatically show 
each new paragraph or heading 
on a new line. But if you wanted 
to add a line break inside the 
middle of a paragraph you can 
use the line break tag «br. />. 


T | 
The Earth 


gets one hundred tons heavier every day 
due to falling space dust. 


Sp 


To create a break between 
themes — such as a change of 
topic in a book or a new scene 


chapter-02/horizontal-rules.html A 
in a play — you can add a 
<p>Venus is the only planet that rotates horizontal rule between sections 
clockwise.</p> using the <hr /> tag. 
<hr /> 
<p>Jupiter is bigger than all the other planets There are a few elements that 
combined. </p> do not have any words between 


an opening and closing tag. They 
are known as empty elements 
and they are written differently. 


An empty element usually 


Venus is the only planet that rotates clockwise. has only one tag. Before the 
closing angled bracket of an 


empty element there will often 

Jupiter is bigger than all the other planets combined. be a space and a forward slash 
character. Some web page 
authors miss this out but it is a 
good habit to get into. 
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VISUAL EDITORS & 


THEIR CODE VIEWS 


Content management systems and HTML editors such as Dreamweaver 
usually have two views of the page you are creating: a visual editor and a 


code view. 


Visual editors often resemble 
word processors. Although 
each editor will differ slightly, 
there are some features that 
are common to most editors 
that allow you to control the 
presentation of text. 


* Headings are created by 
highlighting text then using 
a drop-down box to select a 
heading. 


* Bold and italic text are 
created by highlighting some 
text and pressingabori 
button. 


* New paragraphs are created 
using the return or the enter 
key. 


* Line breaks are created by 
pressing the shift key and the 
return key at the same time. 


® Horizontal rules are created 
using a button with a straight 
line on it. 
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If you copy and paste text from 
a program that allows you to 
format text (such as Word) into 
a visual editor, it may add extra 
markup. To prevent this copy 
the text into a plain text editor 
first (such as Notepad on a PC 
or TextEdit on a Mac) and then 
copy it from that program and 
paste it into the visual editor. 


Upload/Insert © S A © 


Code views show you the code 
created by the visual editor so 
you can manually edit it, or so 
you can just enter new code 
yourself. It is often activated 
using a button with an icon 

that says HTML or has angled 
brackets. White space may be 
added to the code by the editor 
to make the code easier to read. 


Visual HTMI 


Bizjaclu) — (=) co EIM‘ we | 


[Heading2 || 
Heading 1 . 

> Heading 2 
Heading 3 
Heading 4 
Heading 5 


from the comic strip Peanuts, by Charles M. Schulz. He 
igs to Charlie Brown. 
a 


SOY usi appeared in the strip of October 4, 1950, two days after the strip 


Upload/Insert © GAO 


b i link b-quote det ins img úl 


<h2>History</h2> 


Visual HTML 


l| code more lookup close tags 


<p><b>Snoopy</b> is a character from the comic strip <i><a 
href a"cartoons/peanuts.html"», by «a hrefs"authors/schulz.html"» Charles M, 
Schulz«/a». He is a beagle that belongs to «a href="characters/charlie- 


brown.html"» Charlie Brown</a>.</p> 


«p» Snoopy first appeared in the strip of October 4, 1950 two days after the strip 


premiered.</p> 


SEMANTIC MARKUP 


There are some text elements that are not intended to affect the 
structure of your web pages, but they do add extra information to the 
pages — they are known as semantic markup. 


In the rest of the chapter you 
will meet some more elements 
that will help you when you are 
adding text to web pages. For 
example, you are going to meet 
the <em> element that allows 
you to indicate where emphasis 
should be placed on selected 
words and the «blockquote» 
element which indicates that a 
block of text is a quotation. 


Browsers often display the 
contents of these elements in 

a different way. For example, 
the content of the <em> 
element is shown in italics, 

and a «blockquote» is usually 
indented. But you should not 
use them to change the way that 
your text looks; their purpose is 
to describe the content of your 
web pages more accurately. 


The reason for using these 
elements is that other programs, 
such as screen readers or search 
engines, can use this extra 
information. For example, the 
voice of a screen reader may add 
emphasis to the words inside 
the <em> element, or a search 
engine might register that your 
page features a quote if you use 
the <blockquote> element. 
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SIRONG & EMPHASIS 


<strong> 


The use of the <strong> 
element indicates that its 
content has strong importance. 
For example, the words 
contained in this element might 
be said with strong emphasis. 


By default, browsers will show 
the contents of a <strong> 
element in bold. 


<em> 


The <em> element indicates 
emphasis that subtly changes 
the meaning of a sentence. 


By default browsers will show 


the contents of an <em> element 
in italic. 


MEXT 


<p><strong>Beware:</strong> Pickpockets operate in 
this area.</p> 

<p>This toy has many small pieces and is <strong>not 
suitable for children under five years old. 
</strong></p> 


chapter-02/strong.html 


Beware: Pickpockets operate in this area. 


This toy has many small pieces and is not 
suitable for children under five years old. 


chapter-02/emphasis.html 


<p>I <em>think</em> Ivy was the first.</p> 
<p>I think <em>Ivy</em> was the first.</p> 
<p>I think Ivy was the <em>first</em>.</p> 


I think Ivy was the first. 
I think /vy was the first. 


I think Ivy was the first. 


QUOTATIONS 


chapter-02/quotations.html 


<blockquote cite="http://en.wikipedia.org/wiki/ 


Winnie-the-Pooh"> 


<p>Did you ever stop to think, and forget to start 


again?</p> 
</blockquote> 


<p>As A.A. Milne said, <q>Some people talk to 
animals. Not many listen though. That's the 


problem.</q></p> 


Did you ever stop to think, and forget 


to start again? 


As A.A. Milne said, "Some people talk to animals. 
Not many listen though. That's the problem." 


There are two elements 
commonly used for marking up 
quotations: 


<blockquote> 


The <blockquote> element is 
used for longer quotes that take 
up an entire paragraph. Note 
how the <p> element is still 
used inside the <blockquote> 
element. 


Browsers tend to indent the 
contents of the <blockquote> 
element, however you should not 
use this element just to indent a 
piece of text — rather you should 
achieve this effect using CSS. 


<q> 


The <q> element is used for 
shorter quotes that sit within 

a paragraph. Browsers are 
supposed to put quotes around 
the <q> element, however 
Internet Explorer does not — 
therefore many people avoid 
using the <q> element. 


Both elements may use the cite 
attribute to indicate where the 
quote is from. Its value should 

be a URL that will have more 
information about the source of 
the quotation. 


TEXT 
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ABBREVIATIONS & 
ACRONYMS 


<abbr> 


If you use an abbreviation or 
an acronym, then the «abbr» 
element can be used. A title 
attribute on the opening tag is 
used to specify the full term. 


In HTML 4 there was a separate 
«acronym» element for 
acronyms. To spell out the full 
form of the acronym, the title 
attribute was used (as with the 
«abbr» element above). HTML5 
just uses the «abbr»? element 
for both abbreviations and 
acronyms. 


THE 


chapter-02/abbreviations.html 


<p><abbr title-"Professor"»Prof«/abbr» Stephen 
Hawking is a theoretical physicist and 


cosmologist.</p> 


<p><acronym title="National Aeronautics and Space 
Administration">NASA</acronym> do some crazy 


space stuff.</p> 


Prof Stephen Hawking is a theoretical physicist and cosmologist. 


NASA do some crazy space stuff. 


Administration 


CITATIONS & 
DEFINITIONS 


chapter-02/citations.html 


<p><cite>A Brief History of Time</cite> by Stephen 
Hawking has sold over ten million copies 


worldwide.</p> 


A Brief History of Time by Stephen Hawking has 
sold over ten million copies worldwide. 


chapter-02/definitions.html 


<p>A <dfn>black hole</dfn> is a region of space from 
which nothing, not even light, can escape.</p> 


A black hole is a region of space from which 
nothing, not even light, can escape. 


<cite> 


When you are referencing a 
piece of work such as a book, 
film or research paper, the 
<cite> element can be used 
to indicate where the citation is 
from. 


In HTML5, <cite> should not 
really be used for a person's 
name — but it was allowed in 
HTML 4, so most people are 
likely to continue to use it. 


Browsers will render the content 
of a <cite> element in italics. 


<dfn> 


The first time you explain some 
new terminology (perhaps an 
academic concept or some 
jargon) in a document, it is 
known as the defining instance 
of it. 


The <dfn> element is used to 
indicate the defining instance of 
anew term. 


Some browsers show the 
content of the <dfn> element in 
italics. Safari and Chrome do not 
change its appearance. 
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AUTHOR DETAILS 


<address> 


The <address> element has 
quite a specific use: to contain 
contact details for the author of 
the page. 


It can contain a physical address, 
but it does not have to. For 
example, it may also contain a 
phone number or email address. 


Browsers often display the 
content of the <address> 
element in italics. 


You may also be interested in 
something called the hCard 
microformat for adding physical 
address information to your 
markup. 


ONLINE EXTRA: 

You can find out more about 
hCards on the website 
accompanying this book. 


MEXT 


chapter-02/address.html HTML 


<address> 
<p><a href="mailto:homer@example.org"> 
homer@example.org</a></p> 
<p>742 Evergreen Terrace, Springfield.</p> 
</address> 


homer@example.org 


742 Evergreen Terrace, Springfield. 


CHANGES IO CONTENT 


chapter-02/insert-and-delete.html 


<p>It was the <del>worst</del> <ins>best</ins> idea 


she had ever had.</p> 


It was the werst best idea she had ever had. 


<p>Laptop computer:</p> 
<p><s>Was $995</s></p> 
<p>Now only $375</p> 


Laptop computer: 
Was-$995 
Now only $375 


chapter-02/strikethrough.html 


<ins> 
<del> 


The <ins> element can be used 
to show content that has been 
inserted into a document, while 
the «del» element can show text 
that has been deleted from it. 


The content of a «ins» element 
is usually underlined, while the 
content of a «del» element 
usually has a line through it. 


«S? 


The <s> element indicates 
something that is no longer 
accurate or relevant (but that 
should not be deleted). 


Visually the content of an «s» 
element will usually be displayed 
with a line through the center. 


Older versions of HTML had a 
<u> element for content that 
was underlined, but this is being 
phased out. 


TEXT 
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The Story in the Book 
Chapter 1 


Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of Nature, New Scientist, and all the other 
scientific journals her work had appeared in, was a well thumbed copy of On The Road. It had been Molly's favourite book since college, and the longer she 
spent in these four walls the more she felt she needed to be frec. 


She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that "Work is the refuge of people who have 
nothing better to do". Although many considered her pioneering work, unraveling the secrets of the llama DNA, to be an outstanding achievement, Molly 
did think she had something better to do. 


MacBook Pro 


* Sun128 Q 


EXAMPLE 


TEXT 


This is a very simple HTML page that 
demonstrates text markup. 


Structural markup includes elements such as <h1>, <h2>, and <p>. 
Semantic information is carried in elements such as <cite> and <em> 


«html» 

<head> 
<title>Text</title> 

</head> 

<body> 
<hl>The Story in the Book</h1> 
<h2>Chapter 1</h2> 
<p>Molly had been staring out of her window for 


the other scientific journals her work had 


free.</p> 


<p>She had spent the last ten years in this room, 


sitting under a poster with an Oscar Wilde q 
proclaiming that <q>Work is the refuge of 
people who have nothing better to do</q>. Al 
many considered her pioneering work, unravel 
the secrets of the llama <abbr 
title="Deoxyribonucleic acid">DNA</abbr>, to 
outstanding achievement, Molly <em>did</em> 
she had something better to do.</p> 
</body> 
</html> 


about 


an hour now. On her desk, lying between the copies 
of <i>Nature</i>, <i>New Scientist</i>, and all 


appeared in, was a well thumbed copy of <cite>On 
The Road</cite>. It had been Molly's favorite book 
since college, and the longer she spent in these 
four walls the more she felt she needed to be 


uote 


though 
ind 


be an 


think 
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SUMMARY 


TEXT 


J. HTML elements are used to describe the structure of 
the page (e.g. headings, subheadings, paragraphs). 


. They also provide semantic information (e.g. where 
emphasis should be placed, the definition of any 
acronyms used, when given text is a quotation). 


» Numbered lists 
> Bullet lists 
> Definition lists 


There are lots of occasions when we 
need to use lists. HTML provides us with 
three different types: 


Ordered lists are lists where each item in the list is 
numbered. For example, the list might be a set of steps for 
a recipe that must be performed in order, or a legal contract 
where each point needs to be identified by a section 
number. 


Unordered lists are lists that begin with a bullet point 
(rather than characters that indicate order). 


^ Definition lists are made up of a set of terms along with the 
definitions for each of those terms. 
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Eggs aee one of my favorise foods. Herc is 4 recipe Sor deliciously rich scrambled egg 


Ingredients 


* 205 
* dés boner 
© 28» xam 


Method 


Mek boner in a frying pan over a modium heat. 
Gerdy mix the eggs and cream in a bow] 

3, Once brates has mehed add cram and eggs 
Using a spatula fold the oggs from the edge of the pan to the center every 20 seconds (as if you are making as omelet) 
When the eggs are sill mois: remove from the heat (x will coatinse t cook on the plate ueril served) 
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ORDERED LISTS 


ca 


The ordered list is created with 
the <ol> element. 


<li> 


Each item in the list is placed 
between an opening <1i> tag 
and a closing </1i> tag. (The 1i 
stands for list item.) 


Browsers indent lists by default. 


Sometimes you may see a type 
attribute used with the «o1» 
element to specify the type of 
numbering (numbers, letters, 
roman numerals and so on). It 
is better to use the CSS list- 
style-type property covered 
on pages 333-335. 


LISTS 


chapter-03/ordered-lists.html 


<ol> 
«li»Chop potatoes into quarters«/li» 
«li»Simmer in salted water for 15-20 
minutes until tender</1i> 
<li>Heat milk, butter and nutmeg</1i> 
«li»Drain potatoes and mash</1i> 
<1i>Mix in the milk mixture</1i> 
</ol> 


1. Chop potatoes into quarters 

2. Simmer in salted water for 15-20 minutes until tender 
3. Heat milk, butter and nutmeg 

4. Drain potatoes and mash 

5. Mix in the milk mixture 


UNORDERED LISTS 


HTML chapter-03/unordered-lists.html 


<ul> 
«li»lkg King Edward potatoes</1i> 
<11>100m1 milk</1i> 
<11>50g salted butter</1i> 
<li>Freshly grated nutmeg</1i> 
<1i>Salt and pepper to taste</1i> 
</ul> 


Ikg King Edward potatoes 
100ml milk 

50g salted butter 

Freshly grated nutmeg 
Salt and pepper to taste 


<ul> 


The unordered list is created 
with the <ul> element. 


<li> 


Each item in the list is placed 
between an opening <1i> tag 
and a closing </1i> tag. (The 1i 
stands for list item.) 


Browsers indent lists by default. 


Sometimes you may see a type 
attribute used with the <ul> 
element to specify the type of 
bullet point (circles, squares, 
diamonds and so on). It is better 
to use the CSS list-style- 
type property covered on pages 
313/3-3]915. 
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DEFINITION LISTS 


«dl > chapter-03/definition-lists.html HTML 


«dl» 
The definition list is created with <dt>Sashimi</dt> 
the <d1> element and usually <dd>Sliced raw fish that is served with 
consists of a series of terms and condiments such as shredded daikon radish or 
their definitions. ginger root, wasabi and soy sauce</dd> 
<dt>Scale</dt> 
Inside the <d1> element you will <dd>A device used to accurately measure the 
usually see pairs of <dt> and weight of ingredients</dd> 
<dd> elements. <dd>A technique by which the scales are removed 
from the skin of a fish</dd> 


<dt>Scamorze</dt> 
<dt> <dt>Scamorzo</dt> 
<dd>An Italian cheese usually made from whole 
cow's milk (although it was traditionally made 


This is used to contain the t 
S E M M EU from buffalo milk)</dd> 


being defined (the definition 


term). SEP 
«dd» E 
Sashimi 
Sliced raw fish that is served with condiments such as 
This is used to contain the shredded daikon radish or ginger root, wasabi and soy 
definition. Sauce 
Scale 
À device used to accurately measure the weight of 
Sometimes you might see a list ingredients 
where there are two terms used A technique by which the scales are removed from the 
aoe skin of a fish 
for the same definition or two Saoz 
different definitions for the same Scamorzo 
term. An Italian cheese usually made from whole cow's milk 


(although it was traditionally made from buffalo milk) 
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<ul> 


NESTED LISTS 


chapter-03/nested-lists.html 


<1i>Mousses</1i> 


<1i>Pastries 
<ul> 


<1i>Croissant</1i> 
«li»Mille-feuille«/li» 
<1i>Palmier</1i> 
<1i>Profiterole</1i> 


</ul> 
<f T2 
KIS artss/ Vip 
</ul> 


e Mousses 
e Pastries 
o Croissant 
o Mille-feuille 
o Palmier 
o Profiterole 
e Tarts 


You can put a second list inside 
an «1i» element to create a sub- 
list or nested list. 


Browsers display nested lists 
indented further than the parent 
list. In nested unordered lists, 
the browser will usually change 
the style of the bullet point too 
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Scrambled Eggs 


Eggs arc onc of my favorite foods. Here is a recipe for deliciously rich scrambled eggs. 


Ingredients 


e 2cggs 
e itbs butter 
* 2tbs cream 


Method 


. Melt butter in a frying pan over a medium heat 
. Gently mix the eggs and cream in a bowl 
. Once butter has melted add cream and eggs 
e | . Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette) 
. When the eggs are still moist remove from the heat (it will continue to cook on the plate until served) 
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EXAMPLE 


LISTS 


Here you can see a main heading followed by 
an introductory paragraph. An unordered list is 
used to outline the ingredients and an ordered 
list is used to describe the steps. 


«html» 
<head> 


<title>Lists</title> 


</head> 
<body> 
<hl>Scramb 


recipe 
<h2>Ingredi 
<ul> 
<1i>2 egg 


ed Eggs</hl1> 
<p>Eggs are one of my favourite foods. Here jis a 


for deliciously rich scrambled eggs.</p> 


ents</h2> 


S</11> 


X«li»ltbs butter</1i> 
<1i>2tbs cream</1i> 


</ul> 
<h2>Method< 
<ol> 
<1i>Melt 
eat< 


<1i>Gently mix 


<1i>0nce 
<1i>Using 
the p 
you a 
<1i>When 
eat 


until 
</ol> 
</body> 
</html> 


/h2> 


butte 
/li» 


butte 
a spa 
an to 


e ma 


(it wi 


in a frying pan over a medium 


the eggs and cream in a bowl</1i> 


has melted add cream and eggs</1li> 


tula fold the eggs from the edge of 
the center every 20 seconds (as if 

ing an omelette)</1i> 

the eggs are still moist remove from the 


1 continue to cook on the plate 


served)</1i> 
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SUMMARY 


There are three types of HTML lists: ordered, 
unordered, and definition. 


Ordered lists use numbers. 
Unordered lists use bullets. 
Definition lists are used to define terminology. 


Lists can be nested inside one another. 


IBS ES 


> Creating links between pages 
> Linking to other sites 
> Email links 


Links are the defining feature of the web 
because they allow you to move from 


one web page to another — enabling the 
very idea of browsing or surfing. 


You will commonly come across the following types of links: 
* Links from one website to another 
Links from one page to another on the same website 


Links from one part of a web page to another part of the 
same page 


Links that open in a new browser window 


Links that start up your email program and address a new 
email to someone 


arr? (== ES 


NM > h 


t: 


Film Folk 


Festival Diary 


ere aee soe ol the (don feriala we wil be amending thes year 
Ly É yon wodd Me more edormatoe 


Tuck Cay, Uh, USA 
20 = 30 Jamary 2011 


February 


Sydery, Atria 
20 February 2011 


March 


Aunn, Tetas, USA 
11-20 March 2011 
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WRITING LINKS 


Links are created using the <a> element. Users can click on anything 
between the opening <a> tag and the closing </a> tag. You specify 
which page you want to link to using the href attribute. 


THIS IS THE PAGE THE THIS IS THE TEXT THE 
LINK TAKES YOU TO USER CLICKS ON 


mm eS 
«a href="http://www.imdb.com">IMDB</a> 
| 0000 111 2. 


OPENING LINK TAG CLOSING 
LINK TAG 


@ LINKS 


The text between the opening 
<a> tag and closing </a> tag 
is known as link text. Where 
possible, your link text should 
explain where visitors will be 
taken if they click on it (rather 
than just saying "click here"). 
Below you can see the link to 
IMDB that was created on the 
previous page. 


Many people navigate websites 
by scanning the text for links. 
Clear link text can help visitors 
find what they want. This 

will give them a more positive 
impression of your site and may 
encourage them to visit it for 
longer. (It also helps people 
using screen reader software.) 


To write good link text, you can 
think of words people might 

use when searching for the 

page that you are linking to. 

(For example, rather than write 
"places to stay" you could use 
something more specific such as 
"hotels in New York.") 


LINKS o 


LINKING TO OTHER SITES 


<a> chapter-04/linking-to-other-sites.html HTML 


<p>Movie Reviews: 


Links are created using the <a> <ul> 
element which has an attribute <li><a href="http://www.empireonline.com"> 
called href. The value of the Empire</a></1i> 
href attribute is the page that <li><a href="http://www.metacritic.com"> 
you want people to go to when Metacritic</a></1i> 
they click on the link. <li><a href="http://www. rottentomatoes.com"> 
Rotten Tomatoes«/a»«/li» 
Users can click on anything that <li><a href="http://www.variety.com"> 
appears between the opening Variety</a></1i> 
<a> tag and the closing </a> </ul> 
tag and will be taken to the page </p> 
specified in the href attribute. 
When you link to a different = 
website, the value of the href T 
attribute will be the full web 
address for the site, which is 
known as an absolute URL. Movie Reviews: 
TUR. : e Empire 
Hroneers Show links in blue with E. Metacri istactitic 
an underline by default. e Rotten Tomatoes 
e Variety 


ABSOLUTE URLS 


URL stands for Uniform An absolute URL starts with 
Resource Locator. Every web the domain name for that site, 
page has its own URL. This is the and can be followed by the path 
web address that you would type to a specific page. If no page is 
into a browser if you wanted to specified, the site will display the 
visit that specific page. homepage. 


79 LINKS 


LINKING TO OTHER PAGES 


<p> 
<ul> 


chapter-04/linking-to-other-pages.html 


<li><a href="index.html">Home</a></1i> 
<li><a href="about-us.html">About</a></1i> 
<li><a href="movies.html">Movies</a></1i> 
<li><a href="contact.html">Contact</a></1i> 


Sula 
</p> 


RELATIVE URLS 


When linking to other pages 
within the same site, you can 
use relative URLs. These are like 
a shorthand version of absolute 
URLs because you do not need 
to specify the domain name. 


We will take a closer look at 
relative URLs on pages 83-84 
as there are several helpful 
shortcuts you can use to write 
links to other pages on your own 
website. 


ON THE SAME SITE 


<a> 


When you are linking to other 
pages within the same site, 

you do not need to specify the 
domain name in the URL. You 
can use a shorthand known as a 
relative URL. 


If all the pages of the site are in 
the same folder, then the value 
of the href attribute is just the 
name of the file. 


If you have different pages of a 
site in different folders, then you 
can use a slightly more complex 
syntax to indicate where the 
page is in relation to the current 
page. You will learn more about 
these on the pages 81-84. 


If you look at the download 
code for each chapter, you will 
see that the index.html file 
contains links that use relative 
URLs. 


Relative URLs help when building 
a site on your computer because 
you can create links between 
pages without having to set up 
your domain name or hosting. 
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DIRECTORY SIRUCTURE 


On larger websites it's a good idea to organize your code by placing the 
pages for each different section of the site into a new folder. Folders on a 


website are sometimes referred to as directories. 


STRUCTURE 


The diagram on the right shows 
the directory structure for a 
fictional entertainment listings 
website called ExampleArts. 


The top-level folder is known 

as the root folder. (In this 
example, the root folder is called 
examplearts.) The root folder 
contains all of the other files and 
folders for a website. 


Each section of the site is placed 
in a separate folder; this helps 
organize the files. 


If you are working with a content 
management system, blogging 
software, or an e-commerce 
system, you might not have 
individual files for each page of 
the website. 


LINKS 


RELATIONSHIPS 


The relationship between 
files and folders on a website 
is described using the same 
terminology as a family tree. 


In the diagram on the right, you 
can see some relationships have 
been drawn in. 


The examplearts folder is a 
parent of the movies, music 
and theater folders. And the 
the movies, music and theater 
folders are children of the 
examplearts folder. 


Instead, these systems often 
use one template file for each 
different type of page (such as 
news articles, blog posts, or 
products). 


HOMEPAGES 


The main homepage of a site 
written in HTML (and the 
homepages of each section in a 
child folder) is called index.html. 


Web servers are usually set up 
to return the index.html file if no 
file name is specified. 


Therefore, if you enter 
examplearts.comit will return 
examplearts.com/index 
.html, and examplearts.com/ 
music will return examplearts 
.com/music/index.html. 


Editing the template file would 
change all of the pages that use 
that template. Do not change 
any code that is not HTML or 
you may break the page. 


PARENT 


The examplearts folder is a 
parent of the music folder. 


CHILD 


The music folder is a child 
of the examplearts folder. 


Every page and every image on 
a website has a URL (or Uniform 


Resource Locator). The URL is 
made up of the domain name 


followed by the path to that page 


or image. 


The root folder contains: 


* A file called index.html which 


is the homepage for the 
entire site 


* Individual folders for the 
movies, music and theatre 
sections of the site 


The path to the homepage of this 


v li examplearts --.«. eee 


[] index.html 
v lii images 
O logo.gif 
v & movies 
v Bl cinema 
[] index.html 
D listings.html 
[] reviews.html 


vB dvd. ssexesss sus eorr ort 


index.html 
reviews.html 
[] index.html 
+++ vB music 

[] index.html 
listings.html 
reviews.html 
v Bii theater 

[] index.html 
listings.html 
reviews.html 


site is www.examplearts 
.com/index.html. The path 
to the logo for the site is 
examplearts.com/images/ 
logo.gif. 


Each sub-directory contains: 


A file called index.html which 
is the homepage for that 
section 


A reviews page called reviews 
.html 


A listings page called listings 
.html (except for the DVD 
section) 


GRANDPARENT 


The examplearts folder is a 
grandparent of the dvd folder. 


ee GRANDCHILD 


The dvd folder is a grandchild 
of the examplearts folder. 


You use URLs when linking 

to other web pages and when 
including images in your own 
site. On the next page, you will 
meet a shorthand way to link to 
files on your own site. 


The movies section contains: 
* A folder called cinema 


* A folder called DVD. 


LINKS 
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RELATIVE URLS 


Relative URLs can be used when linking to pages within your own 
website. They provide a shorthand way of telling the browser where to 


find your files. 


LINKS 


When you are linking to a page 
on your own website, you do 

not need to specify the domain 
name. You can use relative URLs 
which are a shorthand way to tell 
the browser where a page is in 
relation to the current page. 


This is especially helpful when 
creating a new website or 
learning about HTML because 
you can create links between 
pages when they are only on 
your personal computer (before 
you have got a domain name and 
uploaded them to the web). 


Because you do not need to 
repeat the domain name in each 
link, they are also quicker to 
write. 


If all of the files in your site are 
in one folder, you simply use the 
file name for that page. 


If your site is organized into 
separate folders (or directories), 
you need to tell the browser 
how to get from the page it is 
currently on to the page that you 
are linking to. 


If you link to the same page from 
two different pages you might, 
therefore, need to write two 
different relative URLs. 


These links make use of the 
same terminology (borrowed 
from that of family trees) you 
met on the previous page which 
introduces directory structure. 


RELATIVE LINK TYPE 


SAME FOLDER 
To link to a file in the same folder, just use the file 
name. (Nothing else is needed.) 


CHILD FOLDER 
For a child folder, use the name of the child folder, 
followed by a forward slash, then the file name. 


GRANDCHILD FOLDER 

Use the name of the child folder, followed by a 
forward slash, then the name of the grandchild 
folder, followed by another forward slash, then the 
file name. 


PARENT FOLDER 
Use ../ to indicate the folder above the current one, 
then follow it with the file name. 


GRANDPARENT FOLDER 

Repeat the ../ to indicate that you want to go up 
two folders (rather than one), then follow it with the 
file name. 


EXAMPLE (from diagram on previous page) 


To link to music reviews from the music homepage: 
<a href="reviews.html">Reviews</a> 


To link to music listings from the homepage: 
<a href="music/listings.html]">Listings</a> 


To link to DVD reviews from the homepage: 
<a href="movies/dvd/reviews.html"> 
Reviews</a> 


To link to the homepage from the music reviews: 
<a href="../index.html">Home</a> 


To link to the homepage from the DVD reviews: 
<a href="../../index.html">Home</a> 


When a website is live (that 

is, Uploaded to a web server) 
you may see a couple of other 
techniques used that do not 
work when the files are on your 
local computer. 


For example, you may see the 
name of a child folder without 
the name of a file. In this case 
the web server will usually try 
to show the homepage for that 
section. 


A forward slash will return the 
homepage for the entire site, 
and a forward slash followed 
by a file name will return that 
file providing it is in the root 
directory. 
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EMAIL LINKS 


mailto: 


To create a link that starts up 
the user's email program and 
addresses an email to a specified 
email address, you use the «a» 
element. However, this time the 
value of the href attribute starts 
with mailto: and is followed by 
the email address you want the 
email to be sent to. 


On the right you can see that 
an email link looks just like any 
other link but, when it is clicked 
on, the user's email program 
will open a new email message 
and address it to the person 
specified in the link. 


LINKS 


chapter-04/email-links.html HTML 


<a href="mailto:jon@example.org">Email Jon</a> 


Email Jon 


ana - Men Massa, = 


To: jon@example.org 


Subject 


OPENING LINKS IN 
A NEW WINDOW 


HTML chapter-04/opening-links-in-a-new-window.html 


<a href="http://www.imdb.com" target="_blank"> 
Internet Movie Database</a> (opens in new window) 


Internet Movie Database (opens in new window) 


target 


If you want a link to open in a 
new window, you can use the 
target attribute on the opening 
<a> tag. The value of this 
attribute should be blank. 


One of the most common 
reasons a web page author 
might want a link to be opened 
in a new window is if it points to 
another website. In such cases, 
they hope the user will return 
to the window containing their 
site after finishing looking at the 
other one. 


Generally you should avoid 
opening links in a new window, 
but if you do, it is considered 
good practice to inform users 
that the link will open a new 
window before they click on it. 
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LINKING TO A SPECIFIC 
PART OF THE SAME PAGE 


At the top of a long page 

you might want to add a list 

of contents that links to the 
corresponding sections lower 
down. Or you might want to add 
a link from part way down the 
page back to the top of it to save 
users from having to scroll back 
to the top 


Before you can link to a specific 
part of a page, you need to 
identify the points in the page 
that the link will go to. You do 
this using the id attribute (which 
can be used on every HTML 
element). You can see that the 
<h1> and <h2> elements in this 
example have been given id 
attributes that identify those 
sections of the page 


The value of the id attribute 
should start with a letter or an 
underscore (not a number or 
any other character) and, on a 
single page, no two id attributes 
should have the same value. 


To link to an element that uses 
an id attribute you use the «a» 
element again, but the value of 
the href attribute starts with 
the # symbol, followed by the 
value of the id attribute of the 
element you want to link to. In 
this example, «a href="#top"> 
links to the <h1> element at 
the top of the page whose id 
attribute has a value of top. 
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chapter-05/linking-to-a-specific-part.html 


«hl id="top">Film-Making Te 
<a href="#arc_shot™>Arc Sho 
<a href="#interlude™>Inter 
<a href="i#prologue">Prologu 
<h2 id="arc_shot">Arc Shot< 
<p>A shot in which the sub 

encircling or moving ca 
<h2 id="interlude">Interlud 
<p>A brief, intervening fi 

specifically tied to the 

within a film</p> 
<h2 id="prologue">Prologue< 
<p>A speech, preface, intro 
ain a 


J 


preceding the the 
contrast to epilogue</p> 
<p><a href="#top">Top</a></ 


rms</h1> 

tefa»«Dp Z5 
ude</a><br /> 
e</a><br /><br /> 
/h2> 


ject is photographed by an 


era</p> 

e</h2> 

m scene or sequence, not 
plot, that appears 


/h2> 


duction, or brief scene 
ction or plot of a film; 


p> 


LINKING TO A SPECIFIC 
PART OF ANOTHER PAGE 


Film-Making Terms 


Arc Shot 
In d 


Prologue 


Arc Shot 


A shot in which the subject is photographed by an 
encircling or moving camera 


Interlude 


A brief. intervening film scene or sequence, not 
specifically tied to the plot, that appears within a film 


Prologue 


A speech, preface, introduction, or brief scene preceding 
the the main action or plot of a film; contrast to epilogue 


Top 


If you want to link to a specific 
part of a different page (whether 
on your own site or a different 
website) you can use a similar 
technique. 


As long as the page you are 
linking to has id attributes that 
identify specific parts of the 
page, you can simply add the 
same syntax to the end of the 
link for that page. 


Therefore, the href attribute 
will contain the address for the 
page (either an absolute URL or 
a relative URL), followed by the 
1t symbol, followed by the value 
of the id attribute that is used on 
the element you are linking to. 


For example, to link to the 
bottom of the homepage of the 
website that accompanies this 
book, you would write: 

<a href="http:/www. 
htmlandcssbookcom/ 
#tbottom"> 
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take Choriome rove 
l'oFche à von gout. Ule lo tomponne 
ow vo pote ot is posentia ét o 
à recliner des mieri d'oflches 
ov dow de loe 


8j Links - Mozilla Firefox 


| Ble Lt yew History Bookmarks Took Heip 


hitp:jjveww.himlandcssbook.com[codejchapter-04 example. hemi 


| | Links 
Film Folk 


Festival Diary 


| Here are some of the film festivals we will be attending thas year 
| Please contact us ff you would lke more information. 


January 


jun Film Festival 
| Park City, Utah, USA 
| 20 - 30 January 2011 


| February 


Tropfest 
Sydney, Australia 
20 February 2011 


15 - 24 Apri 2011 


| May 


| Can 
| Cannes, France 
1- 22 May 2011 


| Done 
l 


89 LINKS 
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This example is of a web page about film. 


The <h1> element is used with an id attribute at the top of the page so 
that a link can be added to take readers from the bottom of the page to 
the top. There is an email link to allow readers to contact the author of 
the web page. There are also a number of links to qualified URLs. These 
link to various film festivals. Below this list is a link to a relative URL 
which is an "about" page that lives in the same directory. 


<html> 

<head> 
<title>Links</title> 

</head> 

<body> 
«hl id="top">Film Folk&«/h1» 
<h2>Festival Diary</h2> 
<p>Here are some of the film festivals we 

will be attending this year.<br />Please 


|i: PROFESSIONAL 2 3E «a href-"mailto:filmfolkGexample.org"» 
Beginning a 22 contact us</a> if you would like more 
iD S jH? information.</p> 
3 8. = a <h3>January</h3> 
Pix E <p><a href-"http://www.sundance.org"» 
XO 20)\ Sundance Film Festival</a><br /> 
< 2 zm Park City, Utah, USA«br /> 
E * 20 - 30 January 2011</p> 
Fs B <h3>February</h3> 
9) = <p><a href="http://www.tropfest.com"> 
2ndEdition ZR TES EDERE JU 
> oz 2 sydney, Australia<br /> 
oz 20 February 2011</p> 
a> <!-- additional content --> 
<p><a href-"about.html"»About Film Folk</a></p> 
cuc <p><a href="#top">Top of page</a></p> 
</body> 
</html> 
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SUMMARY 


LINKS 


Links are created using the <a> element. 


The <a> element uses the href attribute to indicate 
the page you are linking to. 


If you are linking to a page within your own site, it is 
best to use relative links rather than qualified URLs. 


You can create links to open email programs with an 
email address in the "to" field. 


You can use the id attribute to target elements within 
a page that can be linked to. 


IMAGES 


> How to add images to pages 
> Choosing the right format 
> Optimizing images for the web 


There are many reasons why you might 
want to add an image to a web page: you 
might want to include a logo, photograph, 
illustration, diagram, or chart. 

There are several things to consider when selecting and 
preparing images for your site, but taking time to get them 


right will make it look more attractive and professional. 
In this chapter you will learn how to: 


e 


Include an image in your web pages using HTML 


e 


Pick which image format to use 


(J 


Show an image at the right size 


e 


Optimize an image for use on the web to make pages 
load faster 


You can also use CSS to include images in your pages using the 
background-image property, which you will meet on pages 
413-420. 
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Safari File Edit View History Bookmarks Develop Window Help 


AAA Images 


] JLS [Lt mo mw htmiandcssbook.com/code/chapter-05/example.htm! 


From À to Zucchini 


This recipe for individual chocolate cakes is so simple and so delectable! 


More Recipes: 


32:7 ele : ENDS 


k € Ej « Sun1218 Q 
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CHOOSING IMAGES FOR 
YOUR SITE 


A picture can say a thousand words, and great 
images help make the difference between an 
average-looking site and a really engaging one. 


Images can be used to set the 
tone for a site in less time than 
it takes to read a description. If 
you do not have photographs 
to use on your website, there 
are companies who sell stock 
images; these are images you 


IMAGES SHOULD... 


v^ Berelevant 

v^ Convey information 

v^ Convey the right mood 
v^ Beinstantly recognisable 
w^ Fit the color palette 


IMAGES 


pay to use (there is a list of stock 
photography websites below). 
Remember that all images are 
subject to copyright, and you 
can get in trouble for simply 
taking photographs from 
another website. 


STOCK PHOTOS 


www.istockphoto.com 
www.gettyimages.com 
www.veer.com 
www.sxc.hu 
www.fotolia.com 


If you have a page that shows 
several images (such as product 
photographs or members of a 
team) then putting them on a 
simple, consistent background 
helps them look better as 

a group. 


ONLINE EXTRA 


We have provided an online 
gallery that helps you choose the 
right image for your website. You 
can find it in the tools section of 
the site accompanying this book. 


SIORING IMAGES ON 
YOUR SITE 


As a website grows, keeping 
images in a separate folder 
helps you understand how the 
site is organized. Here you can 
see an example of the files for 
a website; all of the images are 
stored in a folder called images. 


If you are building a site from scratch, it is good 
practice to create a folder for all of the images 


the site uses. 


Ona big site you might like to 
add subfolders inside the images 
folder. For example, images such 
as logos and buttons might sit in 
a folder called interface, product 
photographs might sit in a page 
called products, and images 
related to news might live in a 
folder called news. 


24 June 2011 20:01 


28 March 2011 05:16 
* PLACES Y B3 images Today, 18:13 
b SEARCH FOR. la chocolate-islands.jpg Yesterday, 16:21 
W lemon-posset.jpg Yesterday, 17:28 
— logo.gif Yesterday, 16:12 
@ roasted-brussel-sprouts.jpg Yesterday, 17:15 
|S) zucchini-cake.jpg Yesterday, 15:59 
À index.html Yesterday, 17:53 


If you are using a content 
management system or blogging 
platform, there are usually tools 
built into the admin site that 
allow you to upload images, 

and the program will probably 
already have a separate folder 
for image files and any 

other uploads. 
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ADDING IMAGES 


<img> 


To add an image into the page 
you need to use an <img> 
element. This is an empty 
element (which means there is 
no closing tag). It must carry the 
following two attributes: 


Src 

This tells the browser where 

it can find the image file. This 
will usually be a relative URL 
pointing to an image on your 
own site. (Here you can see that 
the images are in a child folder 
called images — relative URLs 
were covered on pages 83-84). 


alt 


This provides a text description 
of the image which describes the 
image if you cannot see it. 


title 


You can also use the title 
attribute with the <img> element 
to provide additional information 
about the image. Most browsers 
will display the content of this 
attribute in a tootip when the 
user hovers over the image. 


IMAGES 


chapter-05/adding-images.html 


«img src-"images/quokka.jpg" alt-"A family of 
quokka" title-"The quokka is an Australian 
marsupial that is similar in size to the 
domestic cat." /> 


The text used in the alt attribute 
is often referred to as alt text. 

It should give an accurate 
description of the image content 
so it can be understood by 
screen reader software (used by 
people with visual impairments) 
and search engines. 


If the image is just to make a 
page look more attractive (and 
it has no meaning, such as a 
graphic dividing line), then the 
alt attribute should still be used 
but the quotes should be left 
empty. 


HEIGHT & WIDTH 
OF IMAGES 


HTML chapter-05/height-and-width-of-images.html 


<img src-"images/quokka.jpg" alt-"A family of 
quokka" width-"600" height-"450" /» 


You will also often see an «img» 
element use two other attributes 
that specify its size: 


height 
This specifies the height of the 
image in pixels. 


width 
This specifies the width of the 
image in pixels. 


Images often take longer to 

load than the HTML code that 
makes up the rest of the page. 

It is, therefore, a good idea to 
specify the size of the image 

so that the browser can render 
the rest of the text on the page 
while leaving the right amount of 
space for the image that is still 
loading. 


The size of images is increasingly 
being specified using CSS rather 
than HTML — see pages 409- 
410 for more information about 
this. 
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WHERE TO PLACE IMAGES 


IN YOUR CODE 


Where an image is placed 

in the code will affect how it 
is displayed. Here are three 
examples of image placement 
that produce different results: 


1: BEFORE A PARAGRAPH 
The paragraph starts on a new 
line after the image. 


2: INSIDE THE START OF A 
PARAGRAPH 

The first row of text aligns with 
the bottom of the image. 


3: IN THE MIDDLE OF A 
PARAGRAPH 

The image is placed between the 
words of the paragraph that it 
appears in. 


IMAGES 


chapter-05/where-to-place-images.html 


<img src="images/bird.gif" alt-"Bird" width-"100" 


height-"100" /» 


<p>There are around 10,000 living species of birds 


that inhabit different ecosystems from the 


Arctic to the Antarctic. Many species undertake 


long distance annual migrations, and many more 


perform shorter irregular jo 


<hr 7» 


<p><img src-"images/bird.gif" al 
height-"100" />There are aro 


species of bird 
ecosystems fro 


Species underta 
migrations, 
journ 


irregular 
<hr /> 


J 


and 


<p>There are aroun 


that inhabit different ecosystems from the 
the Antarctic.<img 
src-"images/bird.gif" alt-"Bird" width-"100" 
height-"100" />Many species undertake long 


Arctic to 


rneys.</p> 


s that inhabit different 


t="Bird™ width="100" 
nd 10,000 living 


the Arctic to the Antarctic. Many 


ke long distance annual 
many more perform shorter 
eys.</p> 


d 10,000 living species of birds 


distance annual migrations, and many more perform 


shorter irregular journeys.</p> 


There are around 10,000 living species of birds that inhabit different 
ecosystems from the Arctic to the Antarctic. Many species undertake 
long distance annual migrations, and many more perform shorter 
irregular journeys. 


There are around 10,000 living species of birds that 
inhabit different ecosystems from the Arctic to the Antarctic. Many 
species undertake long distance annual migrations, and many more 
perform shorter irregular journeys. 


There are around 10,000 living species of birds that inhabit different 


ecosystems from the Arctic to the Antarctic. Many 
species undertake long distance annual migrations, and many more 
perform shorter irregular journeys. 


Where you place the image in 
the code is important because 
browsers show HTML elements 
in one of two ways: 


Block elements always appear 
ona new line. Examples of block 
elements include the «h1» and 
<p> elements. 


If the «img? is followed by a 
block level element (such as a 
paragraph) then the block level 
element will sit on a new line 
after the imageas shown in the 
first example on this page. 


Inline elements sit within a 
block level element and do not 
start on a new line. Examples of 
inline elements include the <b>, 
<em>, and <img> elements. 


If the <img> element is inside a 
block level element, any text or 
other inline elements will flow 
around the image as shown in 
the second and third examples 
on this page. 


Block and inline elements are 


discussed in greater depth on 
pages 185-186. 
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ALIGNING 
IMAGES HORIZONTALLY 


align chapter-05/aligning-images-horizontally.html HTML 
The align attribute was 


commonly used to indicate how 
the other parts of a page should 
flow around an image. It has 
been removed from HTML5 

and new websites should use 
CSS to control the alignment of 
images (as you will see on pages 
411-412). 


<p><img src-"images/bird.gif" alt-"Bird" width-"100" 
height="100" align="left" />There are around 
10,000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys.</p> 

<hr /> 

<p><img src-"images/bird.gif" alt-"Bird" width-"100" 
height-"100" align="right" />There are around 
10,000 living species of birds that inhabit 
different ecosystems from the Arctic to the 


| have discussed it here because 
you are likely to come across 
it if you look at older code, and 


: ; 7 Antarctic. Many species undertake long distance 
because some visual editors still 


annual migrations, and many more perform shorter 


insert this attribute when you 
y irregular journeys.</p> 


indicate how an image should be 
aligned. 


The align attribute can take 
these horizontal values: 


left 


This aligns the image to the left 
(allowing text to flow around its 
right-hand side). 


right 

This aligns the image to the right 
(allowing text to flow around its 
left-hand side). 
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This looks a lot neater than 
having one line of text next to 


There are around 10,000 living species of birds that the image (as shown on the 
inhabit different ecosystems from the Arctic to the previous example). 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter . E 
irregular journeys. When you give the align 
attribute a value of left, the 
image is placed on the left and 


text flows around it. 


There are around 10,000 living species of birds that 
inhabit different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys. 


When you give the align 
attribute a value of right, the 
image is placed on the right and 
the text flows around it. 


When text flows right up to the 
edge of an image it can make 

it harder to read. You will learn 
how to add a gap between text 
and images on pages 313-314 
using the CSS padding and 
margin properties. 
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ALIGNING 


IMAGES VERTICALLY 


As you saw on the last page, the 
align attribute is no longer used 
in HTMLS, but it is covered here 
because you may see it used in 
older websites and it is still used 
in the code created by some 
visual editors. 


You can see how to use CSS 
to achieve the same effects on 
pages 285-286. 


There are three values that the 
align attribute can take that 
control how the image should 
align vertically with the text that 
surrounds it: 


top 

This aligns the first line of the 
surrounding text with the top of 
the image. 


middle 


This aligns the first line of the 
surrounding text with the middle 
of the image. 


bottom 


This aligns the first line of the 
surrounding text with the bottom 
of the image. 
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chapter-05/aligning-images-vertically.html HTML 


<p><img src-"images/bird.gif" alt-"Bird" width-"100" 
height-"100" align="top" />There are around 
10,000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys.</p> 

<hr /> 

<p><img src-"images/bird.gif" alt-"Bird" width-"100" 
height="100" align="middle" />There are around 
10,000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys.</p> 

<hr /> 

<p><img src-"images/bird.gif" alt="Bird" width-"100" 
height="100" align="bottom" />There are around 
10,000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys.</p> 


There are around 10,000 living species of birds that 


inhabit different ecosystems from the Arctic to the Antarctic. Many 
species undertake long distance annual migrations, and many more 
perform shorter irregular journeys. 


There are around 10,000 living species of birds that 


inhabit different ecosystems from the Arctic to the Antarctic. Many 
species undertake long distance annual migrations, and many more 
perform shorter irregular journeys. 


There are around 10,000 living species of birds that 
inhabit different ecosystems from the Arctic to the Antarctic. Many 
species undertake long distance annual migrations, and many more 
perform shorter irregular journeys. 


The value of top places the first 
line of text near the top of the 
image and subsequent lines of 
text appear under the image. 


The value of middle places 

the first line of text near the 
vertical middle of the image and 
subsequent lines of text appear 
under the image. 


The value of bottom places the 
first line of text near the bottom 
of the image and subsequent 
lines of text under the image. 


When text flows right up to the 
edge of an image it can make 

it harder to read. You will learn 
how to add a gap between text 
and images on pages 313-314 
using the CSS padding and 
margin properties. 


If you would like all of the text 
to wrap arond the image (rather 
than just one line of text), you 
should use the CSS float 
property discussed on pages 
370-372. 


In older code, you may see the 
align attribute used with the 
values left or right to achieve 
the same effect (as described on 
the previous page), although its 
use is no longer recommended. 
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THREE RULES FOR 
CREATING IMAGES 


There are three rules to remember when you 
are creating images for your website which are 
summarized below. We go into greater detail 
on each topic over the next nine pages. 


SAVE IMAGES IN 
THE RIGHT FORMAT 


Websites mainly use images in 
jpeg, gif, or png format. If you 
choose the wrong image 
format then your image might 
not look as sharp as it should 
and can make the web page 
slower to load. 
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SAVE IMAGES AT 
THERIGHT SIZE 


You should save the image at 
the same width and height it will 
appear on the website. If 

the image is smaller than the 
width or height that you have 
specified, the image can be 
distorted and stretched. If the 
image is larger than the width 
and height if you have specified, 
the image will take longer to 
display on the page. 


USE THE CORRECT 
RESOLUTION 


Computer screens are made up 
of dots known as pixels. Images 
used on the web are also made 
up of tiny dots. Resolution refers 
to the number of dots per inch, 
and most computer screens only 
show web pages at 72 pixels 

per inch. So saving images at 

a higher resolution results in 
images that are larger than 
necessary and take longer to 
download. 


OTHER SOFTWARE 
Adobe Fireworks 
Pixelmator 

PaintShop Pro 

Paint.net 


TOOLS IO EDIT 
& SAVE IMAGES 


There are several tools you can use to edit and 
save images to ensure that they are the right 
size, format, and resolution. 


ONLINE EDITORS 
www.photoshop.com 
www.pixlr.com 
www.splashup.com 
www.ipiccy.com 


The most popular tool amongst 
web professionals is Adobe 
Photoshop. (In fact, professional 
web designers often use this 
software to design entire sites.) 
The full version of Photoshop is 
expensive, but there is a cheaper 
version called Photoshop 
Elements which would suit the 
needs of most beginners. 


ONLINE EXTRA 

Watch videos that demonstrate 
how to resize images and save 
them in the correct format using 
both of these applications. 
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Whenever you have many different 
colors in a picture you should use a JPEG. 

A photograph that features snow or an 
overcast sky might look like it has large 
areas that are just white or gray, but the 
picture is usually made up of many different 
colors that are subtly different. 


AERE, 


T 


A 


caper 


J 
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IMAGE FORMATS: GIF 


Use GIF or PNG format 
when saving images 

with few colors or large 
areas of the same color. 


WWF 


When a picture has an area that is filled 

with exactly the same color, it is known as 
flat color. Logos, illustrations, and diagrams 
often use flat colors. (Note that photographs 
of snow, sky, or grass are not flat colors, 
they are made up of many subtly different 
shades of the same color and are not as 
suited to GIF or PNG format.) 


113 


IMAGE DIMENSIONS 


The images you use on your website should be 
saved at the same width and height that you 
want them to appear on the page. 


For example, if you have 
designed a page to include an 
image that is 300 pixels wide by 
150 pixels tall, the image you use 
should be 300 x 150 pixels. You 
may need to use image editing 
tools to resize and crop the 


REDUCING IMAGE SIZE 
You can reduce the size of 
images to create a smaller 
version of the image. 


Example: If your image is 600 
pixels wide and 300 pixels tall, 
you can reduce the size of the 

image by 50%. 


Result: This will create an image 
that is quicker to download. 


IMAGES 


image. When sourcing images, it 
is important to understand how 
you can alter the dimensions of 
an image; imagine that you had 
designed a web page to include 
an image that is 300 pixels wide 
by 150 pixels tall: 


INCREASING IMAGE SIZE 
You can't increase the size of 
photos significantly without 
affecting the image quality. 


Example: If your image is only 
100 pixels wide by 50 pixels tall, 
increasing the size by 30096 
would result in poor quality. 


Result: The image will look 
blurry or blocky. 


ONLINE EXTRA 

Visit the tools section of the 
website accompanying this 
book to watch a video guide to 
resizing images in Photoshop 
and GIMP. 


CHANGING SHAPE 

Only some images can be 
cropped without losing valuable 
information (see next page). 


Example: If your image is 300 
pixels square, you can remove 
parts of it, but in doing so you 
might lose valuable information. 


Result: Only some images can 
be cropped and still make sense. 


CROPPING IMAGES 


When cropping images it is important not to 
lose valuable information. It is best to source 
images that are the correct shape if possible. 


PORTRAIT LANDSCAPE 


Here you can see an illustration If we crop this illustration to If we add extra space to the left 

of a giraffe that is best suited to make it landscape we lose the and right of the illustration the 

appearing in portrait. head and feet. background is not continued. 
LANDSCAPE PORTRAIT 


Here you can see an illustration If we crop this illustration to If we add extra space to the top 
of an elephant that is best suited make it portrait we lose the trunk and bottom of the illustration the 
to appearing in landscape. and the hindquarters. background is not continued. 


IMAGES 


114 


T15 


IMAGE RESOLUTION 


Images created for the web should be saved at 
a resolution of 72 ppi. The higher the resolution 
of the image, the larger the size of the file. 


JPGs, GIFs, and PNGs belong to 
a type of image format known 

as bitmap. They are made up of 
lots of miniature squares. The 
resolution of an image is the 
number of squares that fit within 
a 1inch x1 inch square area. 


IMAGES 


Images appearing on computer 
screens are made of tiny squares 
called pixels. A small segment 
of this photograph has been 
magnified to show how it is 
made up of pixels. The web 
browsers on most desktop 


computers display images at a 
resolution of 72 pixels per inch 
(ppi). Images in print materials 
(such as books and magazines) 
are made up of tiny circles called 
dots. These images are usually 
printed at a resolution of 300 
dots per inch (dpi). 


For this image: 
JPEG at 300 dpi = 1,526kb 
JPEG at 72 ppi = 368kb 


Due to the fact that computer 
displays are capped at a 
resolution of 72 ppi, using 
images on the web with a higher 
resolution will not result in better 
image quality — only in larger 
file sizes, which will increase the 
time needed to load them and 
therefore slow down viewing of 
your web pages. 


When an image is a line drawing 
(such as a logo, illustration, or 
diagram), designers will often 
create it in vector format. 
Vector formatted images are 
very different to bitmap images. 


The current method of using 
vector images for display on 
websites involves saving a 
bitmap version of the original 
vector image and using that. 


Scalable Vector Graphics (SVG) 
are a relatively new format used 
to display vector images directly 
on the web (eliminating the need 
to create bitmap versions of 
them), however its use is not yet 
widespread. 


VECTOR IMAGES 


Vector images differ from bitmap images and 
are resolution-independent. Vector images are 
commonly created in programs such as Adobe 


Illustrator. 


Vector images are created by 
placing points on a grid, and 
drawing lines between those 
points. A color can then be 
added to "fill in" the lines that 
have been created. 


The advantage of creating line 
drawings in vector format is that 
you can increase the dimensions 
of the image without affecting 
the quality of it. 
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ANIMATED GIFS 


Animated GIFs show several frames of an 


image in sequence and therefore can be used to 
create simple animations. 


Below you can see the individual 
frames that make up an 
animated GIF that shows an 
orange dot revolving around 

a circle — like the kind of 
animation you might see when a 
web page is loading. 


Some image editing applications 
such as Adobe Photoshop allow 
you to create animated GIFs. 
There are several tutorials about 
how to do this on the web. There 
are also several websites that 
allow you to upload the graphics 
for the individual frames and 
create the animated GIF for you. 


IMAGES 


IT IS IMPORTANT TO 
REMEMBER: 


Each extra frame of the image 
increases the size of the file, and 
can therefore add to the time it 
takes for an image to download 
(and web users do not like 
waiting a long time for images to 
download). 


Because GIFs are not an 

ideal format for displaying 
photographs, animated GIFs are 
really only suitable for simple 
illustrations. 


Some designers frown on 
animated GIFs because they 
remember a lot of amateur web 
designers overusing them in the 
1990's. 


TRANSPARENT GIF 


If the transparent part of the 
image has straight edges and 

it is 10096 transparent (that is, 
not semi-opaque), you can save 
the image as a GIF (with the 
transparency option selected). 


STRAIGHT 


TRANSPARENCY 


Creating an image that is partially transparent 
(or "see-through") for the web involves 
selecting one of two formats: 


PNG 


If the transparent part of the 
image has diagonal or rounded 
edges or if you want a semi- 
opaque transparency or a drop- 
shadow, then you will need to 
save it as a PNG. 


DIAGONAL ROUND 


SEMI-OPAQUE 


ull 


Transparent PNGs are not fully 
supported in older browsers, 
most notably Internet Explorer 6 
(IE6). There is some JavaScript 
you can use to get around this 
issue. The details of this script 
can be found in the tools section 
of the website accompanying 
this book. 


DROP-SHADOW 
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EXAMINING IMAGES 


ON THE WEB 


CHECKING THE SIZE OF IMAGES 


If you are updating a website, you might need to check the size of an 
existing image before creating a new one to replace it. This can be 
achieved by right-clicking on the image and making a selection from 
the pop-up menu that appears. (Mac users will need to hold down the 
control key and click rather than right-click.) 


INE] EXGITTTTENTTT 


K, 
v PE i 


y EAS -—— 
© Open image in New Window 
» Open Image in New Tab 
Save Image to "Downloads" 
Save Image As... 


Add Image to iPhoto Library 
Use Image as Desktop Picture 


Copy Image Address 
Copy Image 


Inspect Element 


DOWNLOADING IMAGES 


If you want to download images from a website, you can do so by 
accessing the same pop-up menu. (Please remember however that all 
images online are subject to copyright and require explicit permission to 
reuse.) 


* DEVICES 


3 Open Image in New Window 
+ Open image in New Tab 
bys t. Save Image to "Downloads" 


Save Image As 


P SHARED 


P PLACES. 


> SEARCH FOR 


Add Image to iPhoto Library 
Use Image as Desktop Picture 


Copy Image Address 
Copy Image 


Inspect Element 
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On the left you can see how to 
check the size of images and 
how to download them using 
Safari. Below is a brief overview 
of what to select in the pop-up 
menu to perform these functions 
in various browsers. 


CHROME 

Size: Open Image in New Tab 
Size appears in new tab 
Download: Save Image As 


FIREFOX 

Size: View Image Info 

Size appears in pop-up window 
Download: Save Image As 


INTERNET EXPLORER 
Size: Properties 

Size appears in pop-up window 
Download: Save Image 


SAFARI 

Size: Open Image in New Tab 
Size appears in title bar 
Download: Save Image As 


HIML5: FIGURE AND 
FIGURE CAPTION 


HTML chapter-05/figure-and-figure-caption.html 


<figure> 
<img src-"images/otters.jpg" alt-"Photograph of 
two sea otters floating in water"? 
<br /> 
<figcaption>Sea otters hold hands when they 
sleep so they don't drift away from each 
other.</figcaption> 
</figure> 


EE ^ fus 
Sea otters hold hands when they sleep so they don't drift away from each other. 


<figure> 


Images often come with 
captions. HTML5 has introduced 
a new <figure> element to 
contain images and their caption 
so that the two are associated. 


You can have more than one 
image inside the «figure» 
element as long as they all share 
the same caption. 


<figcaption> 


The <figcaption> element has 
been added to HTMLS in order 
to allow web page authors to add 
a caption to an image. 


Before these elements were 
created there was no way to 
associate an <img> element with 
its caption. 


Older browsers that do not 
understand HTML5 elements 
simply ignore the new elements 
and display the content of them. 
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In this example, the logo is a GIF The alt attribute on each 
because it uses flat colors, while image provides a description 
the photographs are JPEGs. The for those using screen readers 
main photo is placed inside the and the title attribute provides 
HTML5 <figure> element and additional information. (This is 


has its own caption. 


IMAGES 


shown in the tooltip.) 


@ Safari File Edit View History Bookmarks Develop Window Help 


enn Images 


This example does not 

use the height, width, or 
align attributes as these are 
being phased out and you 
are encouraged to use CSS 
properties instead. 


| 4 [€] "m la http://www.htmlandcssbook.com/code/chapter-05/example.htmi 


From A to Zucchini 


This recipe for individual chocolate cakes is so simple and so delectable! 


More Recipes: 


* Sunl218 Q 


EXAMPLE 
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«html» 
<head> 
<title>Images</title> 
</head> 
<body> 
<hl> 
<img src="images/logo.gif" 
alt="From A to Zucchini" /> 
</h1> 
<figure> 
<img src="images/chocolate-islands.jpg" 
alt="Chocolate Islands" 
title="Chocolate Islands Individual Cakes" /> 
<p> 
<figcaption> 
This recipe for individual chocolate 
cakes is so simple and so delectable! 
</figcaption> 
</p> 
</figure> 
<h4>More Recipes:</h4> 
<p> 
<img src="images/lemon-posset. jpg" 
alt="Lemon Posset" 
title="Lemon Posset Dessert" /> 
<img src="images/roasted-brussel-sprouts. jpg" 
alt="Roasted Brussel Sprouts" 
title="Roasted Brussel Sprouts Side Dish" /> 
<img src="images/zucchini-cake. jpg" 
alt="Zucchini Cake" 
title="Zucchini Cake No Frosting" /> 
</p> 
</body> 
</html> 
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SUMMARY 


IMAGES 


The <img> element is used to add images to a 
web page. 


You must always specify a src attribute to indicate the 
source of an image and an alt attribute to describe the 
content of an image. 


You should save images at the size you will be using 
them on the web page and in the appropriate format. 


Photographs are best saved as JPEGs; illustrations or 
logos that use flat colors are better saved as GIFs. 
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> How to create tables 
> What information suits tables 
> How to represent complex data in tables 


There are several types of information 
that need to be displayed in a grid or 
table. For example: sports results, stock 
reports, train timetables. 


When representing information in a table, you need to think 
in terms of a grid made up of rows and columns (a bit like a 
spreadsheet). In this chapter you will learn how to: 


* Use the four key elements for creating tables 
* Represent complex data using tables 


* Add captions to tables 
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WHAT'S A TABLE? 


A table represents information in a grid format. 
Examples of tables include financial reports, TV 
schedules, and sports results. 


Grids allow us to understand Each block in the grid is referred 
complex data by referencing to as a table cell. In HTML a 
information on two axes. table is written out row by row. 


3 REUTERS U.S. News Sectors — Analysis 


& Markets & Industries & Opinion 


Commodities 


Related Topics: MARKETS BUSINESS ECONOMY GREEN BUSINESS HOT STOCKS . MORE TOPICS + 


THOMSON REUTERS/JEFFERIES CRB INDEX(TR/J CRB) MARKETS 
Change Open High Low Times s. EUROPE ASIA SECTORS 


~ 359.42 -336 36092 36119 35799 145 rs 


Data ae of 34 D? (D 


Market Indices All Indices. 
COMMODITY FUTURES 


Energy: Oil, Natural Gas, Electricity 


Metals: Base Metals, Precious Metals 


DOW 12,189.14 15269 -1.24% 
Grains: Com/Maize Wheat, Barley, Rice 
Oilseeds: Soybeans, Rapseed, Palm Oil S&P 500 1,305.75 v 13.93 -1.06% 
Softs: Sugar Coffee Cocoa Rubber. Citrus, Cotton oton — u ay m NASDAQ 2,731.64 v-3301 -119% 
Livestock: Lean Hogs, Live Cattle 

TR US INDEX 119.44 -147 -1.22% 
THOMSON REUTERS EQUAL WEIGHT CONTINUOUS COMMODITIES INDEX (CCI) Currencies » All Currencies 
Position of price in relation to its moving average. Uri MK is desied to identify cyclical tums. CCI works well in ranging EUR/USD 1.4234 -1.35% 
markets and typically Nuctuates between + 100 and - 

GBP/USD 1.6262 -0.40% 
Commodity Currency Last Change % Change Trade Date/Time 

USD/JPY 82. ,63' 
Hogs, Lean Pit CME Junit USD 10128 +0.20 +0.20% 04/18 14:13 iud asin 
Oil, Heating New York No. 2 NYMEX Mayt1 usp 319  -004 418% 04181514 Commodities 4 Ay Comedies 
Crude Oil Light Sweet May11 USD 10721 -245 -2.29% 04/18 15:14 GOLD 1,496.20 *10.20 +0.68% 
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BASIC TABLE STRUCTURE 


<table> 


The <table> element is used 
to create a table. The contents 
of the table are written out row 
by row. 


<tr> 


You indicate the start of each 
row using the opening <tr> tag. 
(The tr stands for table row.) 


It is followed by one or more 
<td> elements (one for each cell 
in that row). 


At the end of the row you use a 
closing </tr> tag. 


<td> 


Each cell of a table is 
represented using a <td> 
element. (The td stands for 
table data.) 


At the end of each cell you use a 
closing </td> tag. 


Some browsers automatically 
draw lines around the table 
and/or the individual cells. You 
will learn how to control the 
borders of tables using CSS on 
pages 309-312 and 337-340. 


TABLES 


chapter-06/basic-table-structure.html 


«table» 

SUD 
<td>15</td> 
<td>15</td> 
<td>30</td> 

<7 tr? 

<tr> 
<td>45</td> 
<td>60</td> 
<td>45</td> 

</tr> 

SUUS 
<td>60</td> 
<td>90</td> 
<td>90</td> 

</tr> 

</table> 


15 15 30 
45 60 45 
60 90 90 


TABLE HEADINGS 


HTML chapter-06/table-headings.html 


<table> 
<tr> 
<th></th> 
<th scope="col">Saturday</th> 
<th scope="col">Sunday</th> 


</tr> 

SER? 
«th scope="row">Tickets sold:</th> 
<td>120</td> 
<td>135</td> 

STR 

sir? 
<th scope="row">Total sales:</th> 
<td>$600</td> 
<td>$675</td> 

</tr> 

</table> 


Saturday Sunday 
Tickets sold: 120 135 
Total sales: $600 $675 


<th> 


The <th> element is used just 
like the <td> element but its 
purpose is to represent the 
heading for either a column or 
a row. (The th stands for table 
heading.) 


Even if a cell has no content, 
you should still use a <td> or 
<th> element to represent 
the presence of an empty cell 
otherwise the table will not 
render correctly. (The first cell 
in the first row of this example 
shows an empty cell.) 


Using <th> elements for 
headings helps people who 
use screen readers, improves 
the ability for search engines 
to index your pages, and also 
enables you to control the 
appearance of tables better 
when you start to use CSS. 


You can use the scope attribute 
on the <th> element to indicate 
whether it is a heading for a 
column or a row. It can take the 
values: row to indicate a heading 
for a row or col to indicate a 
heading for a column. 


Browsers usually display the 


content of a «th» element in 
bold and in the middle of the cell. 
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SPANNING COLUMNS 


Sometimes you may need the 
entries in a table to stretch 
across more than one column. 


The colspan attribute can be 
used on a «th» or «td» element 
and indicates how many columns 
that cell should run across. 


In the example on the right 

you can see a timetable with 

five columns; the first column 
contains the heading for that 
row (the day), the remaining four 
represent one hour time slots. 


If you look at the table cell that 
contains the words 'Geography' 
you will see that the value of the 
colspan attribute is 2, which 
indicates that the cell should run 
across two columns. In the third 
row, 'Gym' runs across three 
columns. 


You can see that the second 

and third rows have fewer 

<td> elements than there are 
columns. This is because, when 
a cell extends across more than 
one column, the <td> or «th» 
cells that would have been in the 
place of the wider cells are not 
included in the code. 


| added some CSS styles to this 
example so that you can see how 
the cells span more than one 
column. You will learn how to do 
this on pages 250, 337-340. 
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chapter-06/spanning-columns.html 


«table» 

SUD 
<th></th> 
<th>9am</th> 
<th>10am</th> 
<th>1llam</th> 
<th>12am</th> 

</tr> 

<tt> 
<th>Monday</th> 


<td colspan="2">Geography</td> 


<td>Math</td> 
<td>Art</td> 

Str? 

<tr> 
<th>Tuesday</th> 
<td colspan="3">Gym</td> 
<td>Home Ec</td> 

</tP> 

</table> 


9am 10am 
Monday Geography 
Tuesday Gym 


llam 
Math 


12am 
Art 


Home Ec 


SPANNING ROWS 


<table> 
<tr> 
<th></th> 
<th>ABC</th> 
<th>BBC</th> 
<th>CNN</th> 
KPC? 
<tr> 
<th>6pm - 7pm</th> 
<td rowspan="2">Movie</td> 
<td>Comedy</td> 
<td>News</td> 
</ EP? 
Str? 
<th>7pm - 8pm</th> 
<td>Sport</td> 
<td>Current Affairs</td> 
Sftr» 
</table> 
ABC BBC 
6pm - 7pm Comedy 
Movie 
7pm - 8pm Sport 


chapter-06/spanning-rows.html 


CNN 
News 


Current Affairs 


You may also need entries in 
a table to stretch down across 
more than one row. 


The rowspan attribute can be 
used on a <th> or <td> element 
to indicate how many rows a cell 
should span down the table. 


In the example on the left you 
can see that ABC is showing a 
movie from 6pm - 8pm, whereas 
the BBC and CNN channels are 
both showing two programs 
during this time period (each of 
which lasts one hour). 


If you look at the last «tr» 
element, it only contains three 
elements even though there are 
four columns in the result below. 
This is because the movie in the 
<tr> element above it uses the 
rowspan attribute to stretch 
down and take over the cell 
below. 


| have added some CSS styles to 
this example so that you can see 
how the cells span more than 
one row. You will learn how to 
apply these CSS styles to tables 
on pages 250, 337-340. 
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LONG IABLES 


There are three elements that 


E S T ENTE chapter-06/long-tables.html 
main content of the table and <table> 
the first and last rows (which can <thead> 
contain different content). Ct» 
<th>Date</th> 
These elements help people <th>Income</th> 
who use screen readers and also <th>Expenditure</th> 
allow you to style these sections </tr> 
in a different manner than the </thead> 
rest of the table (as you will see <tbody> 
when you learn about CSS). <tr> 
«th»1st January</th> 
<td>250</td> 
ct h ea d > <td>36</td> 
Str? 
The headings of the table should pd 
sit inside We <thead> element. SERIO alae yea 
<td>285</td> 
<td>48</td> 
</tr> 
<tbody> <!-- additional rows as above --> 
<tr> 
The body should sit inside the <th>3lst January</th> 
<tbody> element. <td>129</td> 
<td>64</td> 
</ UP» 
WA CIB se 
<tfoot> 
The footer belongs inside the um 
<tfoot> BULUM re 
<td>7824</td> 
By default, browsers rarely treat Dora i 
</tr> 
the content of these elements S 
any differently than other Éibstilus 


elements however designers 
often use CSS styles to change 
their appearance. 
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Date 


ist January 
2nd January 
3rd January 
4th January 
Sth January 
6th January 
7th January 
8th January 
9th January 
10th January 
11th January 
12th January 
13th January 
14th January 
15th January 
16th January 
17th January 
18th January 
19th January 
20th January 
21st January 
22nd January 
23rd January 
24th January 
25th January 
26th January 
27th January 
28th January 
29th January 
30th January 


31st January 


Income 


Expenditure 
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Some of the HTML editors that 
come in content management 
systems offer tools to help 

draw tables. If the first row of 
your table only contains <th> 
elements then you may find that 
the editor inserts a <thead> 
element automatically. 


Part of the reason for having 
separate <thead> and <tfoot> 
elements is so that, if you have 

a table that is taller than the 
screen (or, if printed, longer than 
one page) then the browser 

can keep the header and footer 
visible whilst the contents of 

the table scroll. This is intended 
to make it easier for users to 

see which column the data is in 
(however this functionality is not 
implemented by default in any 
current browser). 


| have added some CSS styles 

to this example so that you can 
see the contents of the <thead> 
and <tfoot> being treated 
differently than the rest of the 
rows. You will learn how to apply 
these CSS styles to tables on 
pages 309-312 and 337-340. 
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WIDTH & SPACING 


There are some outdated 
attributes which you should not 
use on new websites. You may, 
however, come across some 

of them when looking at older 
code, so | will mention them 
here. All of these attributes have 
been replaced by the use of CSS. 


The width attribute was used 
on the opening <table> tag to 
indicate how wide that table 
should be and on some opening 
<th> and <td> tags to specify 
the width of individual cells. 
The value of this attribute is 

the width of the table or cell in 
pixels. 


The columns in a table need to 
form a straight line, so you often 
only see the width attribute on 
the first row (and all subsequent 
rows would use that setting). 


The opening «table» tag could 
also use the cellpadding 
attribute to add space inside 
each cell of the table, and the 
cellspacing attribute to create 
space between each cell of 

the table. The values for these 
attributes were given in pixels. 


| added CSS styles to this 
example so that you can see the 
width of the table cells more 
clearly. If you want to control 
the width or spacing of tables 
and cells you should use CSS as 
shown on pages 303, 337-340. 
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chapter-06/width-and-spacing.html 


«table width="400" cellpadding-"10" cellspacing="5"> 


SUE 
«th width="150"></th> 
<th>Withdrawn</th> 
<th>Credit</th> 
<th >Balance</th> 
</tr> 
SUD? 
<th>January</th> 


<td>250.00</td> 
<td>660.50</td> 
<td>410.50</td> 

</tr> 

SU? 
<th>February</th> 
<td>135.55</td> 
<td>895.20</td> 
<td>1170.15</td> 


</tr> 
</table> 
Withdrawn 
January 250.00 
February 135.55 


Credit 


660.50 


895.20 


Balance 


410.50 


1170.15 


OLD CODE: 
BORDER & BACKGROUND 


The border attribute was used 


chapter-06/border-and-background.html Dubottttlie ccable3cande bdo 
<table border-"2" bgcolor="#efefef"> elements to indicate the width of 
<tr> the border in pixels. 
<th width="150"></th> 
<th>Withdrawn</th> The bgcolor attribute was used 
<th>Credit</th> to indicate background colors 
«th width="150" bgcolor="#cccccc"™>Balance</th> of either the entire table or 
</tr> individual table cells. The value 
<tr> is usually a hex code (which we 
<th>January</th> discuss on pages 249-252). 
<td>250.00</td> 
<td>660.50</td> This example uses the HTML 
<td bgcolor="#cccccc">410.50</td> border and bgcolor attributes. 
</tr> No CSS attributes were utilized 
<tr> in this example. 
<th>February</th> 
<td>135.55</td> When building a new website 
<td>895.20</td> you should use CSS to control 
<td bgcolor="#ceccccc">1170.15</td> the appearance of the table 
</tr> rather than these attributes. 
</table> They are only covered here 
because you may come across 
them if you look at the code of 
 -— ; older websites. 
RESULT | 


| [Withdrawn Credit | Balance 


[February [13555 |89520|1170.15 
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© Tables - Mozilla Firefox — 
| Ele Edt wew History Gookmarks Tools Heb 


a bitp:[]www.htmlandessbook. com[code/chapter-06/example.himil 


Home starter hosting Premium business hosting 
Disk space 250mb 1gb 
Bandwidth 5gb per month 50gb per month 
| Email accounts 3 10 
Server Shared VPS 
Support Emal Telephone and email 
Setup Free Free 
FTP accounts. 1 5 
Sign up now and save 10%! 


This example shows a table for 
customers to compare website 
hosting packages. There are 
table headings in the first row 
and first column of the table. 


o TABLES 


The empty cell in the top left still 
has a «th» element to represent 
it. Each cell of the table must be 

accounted for by a <th> or <td> 
element. The <th> elements use 


the scope attribute to indicate 
whether they are headings for 

a row or column. The final row 
uses the colspan attribute to 
spread across all three columns. 


"RE 


EXAMPLE 


TABLES 


<html> 
<head> 
<title>Tables</title> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th></th> 
<th scope="col">Home starter hosting</th> 
<th scope="col">Premium business hosting</th> 
<7 UE? 
</thead> 
<tbody> 
<tr? 
«th scope="row">Disk space</th> 
<td>250mb</td> 
<td>lgb</td> 
SPP 
<tr> 
«th scope="row">Bandwidth</th> 
<td>5gb per month</td> 
<td>50gb per month</td> 
«tb 
<!-- more rows like the two above here --> 
</tbody> 
<tfoot> 
Str» 
<td></td> 
<td colspan="2">Sign up now and save 104!</td> 
ere 
</tfoot> 
</table> 
</body> 
</html> 
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SUMMARY 


TABLES 


The <table> element is used to add tables to a web 
page. 
A table is drawn out row by row. Each row is created 


with the <tr> element. 


Inside each row there are a number of cells 
represented by the <td> element (or «th» if itis a 
header). 


You can make cells of a table span more than one row 
or column using the rowspan and colspan attributes. 


For long tables you can split the table into a <thead>, 
<tbody>, and <tfoot>. 


> How to collect information from visitors 
> Different kinds of form controls 
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FORMS 


Traditionally, the term 'form' has referred 
to a printed document that contains 
spaces for you to fill in information. 

HTML borrows the concept of a form to refer to different 


elements that allow you to collect information from visitors to 
your site. 


Whether you are adding a simple search box to your website or 
you need to create more complicated insurance applications, 
HTML forms give you a set of elements to collect data from 
your users. In this chapter you will learn: 


* How to create a form on your website 
» The different tools for collecting data 


New HTML5 form controls 


Edit View History Bookmarks Develop Window Help MO 4 TEA Sunizi9 Q 


awa htm acd 


ook com Cot thagte 


Your Review 


How did you hear about as? | Googie 18) 


Would you visit again? 
Yes © No © Maybe 


Comment: 


@ Sign me up for email updates. 
* 
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WHY FORMS? 


The best known form on the web is probably 
the search box that sits right in the middle of 
Google's homepage. 


In addition to enabling users to when registering as a member 
search, forms also allow users of a website, when shopping 

to perform other functions online, and when signing up for 
online. You will see forms newsletters or mailing lists. 


Google 


Googie Senren rm Feeling Lueky 


Advertising Programs | Business Solutions | About Google | Goto Google UK | Privacy Change background imager 
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ADDING TEXT: 
Text input (single-line) 


Used for a single line of text such 
as email addresses and names. 


Ivy 


MAKING CHOICES: 
Radio buttons 


For use when a user must select 
one of a number of options. 


(9 Rock © Pop © Jazz 


SUBMITTING FORMS: 


Submit buttons 


To submit data from your form 
to another web page. 


( Subscribe ) 


FORM CONTROLS 


There are several types of form controls that 
you can use to collect information from visitors 


to your site. 


Password input 
Like a single line text box but it 
masks the characters entered. 


Checkboxes 


When a user can select and 
unselect one or more options. 


M iTunes Q Last.fm O Spotify 


Image buttons 
Similar to submit buttons but 
they allow you to use an image. 


SUBSCRIBE 


Text area (multi-line) 
For longer areas of text, such as 
messages and comments. 


Enter your comments... 


Drop-down boxes 
When a user must pick one of a 
number of options from a list. 


iPod i 


UPLOADING FILES: 
File upload 


Allows users to upload files 
(e.g. images) to a website. 


( Upload ) 
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HOW FORMS WORK 


A user fills in a form and then presses a button 
to submit the information to the server. 


The name of each form 
control is sent to the 
server along with the 


VOTE FOR YOUR FAVORITE JAZZ value the user enters or 
MUSICIAN OF ALL TIME selects. 


Username: Ivy 


| vote for: Ella Fitzgerald 
Herbie Hancock 
John Coltrane 
Miles Davis 
Thelonius Monk 


The server processes 
the information using a 
programming language 
such as PHP, C£, VB.net, 
or Java. It may also store 
the information in a 


database. 


Thank you, Ivy! 

The server creates a new 
page to send back to the 
browser based on the 
information received. 


You voted for Herbie Hancock. 


(149) FORMS 


A form may have several form controls, each 
gathering different information. The server 
needs to know which piece of inputted data 
corresponds with which form element. 


NAME 


=a 


username-Ivy 


E 


VALUE 


To differentiate between various pieces of inputted data, information 
is sent from the browser to the server using name/value pairs. In this 
example, the form asks for the visitor's username and also for their 
favorite jazz musician. The name/value pairs sent to the server are: 


username-Ivy vote-Herbie 

If the form control allows the If the form control allows you 
user to enter text, then the value to choose from a fixed set of 

of the form control is whatever answers (e.g. radio buttons, 

the user has typed in. checkboxes or a drop down list), 


the web page author will add 
code that gives each option an 
automatic value. 


You should never change the name of a form control in a page unless 
you know that the code on the server will understand this new value. 
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FORM STRUCTURE 


«form» 


Form controls live inside a 
«form? element. This element 
should always carry the action 
attribute and will usually have a 
method and id attribute too. 


action 

Every «form? element requires 
an action attribute. Its value 
is the URL for the page on the 
server that will receive the 
information in the form when it 
is submitted. 


method 


Forms can be sent using one of 
two methods: get or post. 


With the get method, the values 
from the form are added to 

the end of the URL specified in 
the action attribute. The get 
method is ideal for: 


short forms (such as search 
boxes) 


when you are just retrieving 
data from the web server 
(not sending information that 
should be added to or deleted 
from a database) 
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chapter-07/form-structure.html 


<form action-"http://www.example.com/subscribe.php" 


method="get"> 


<p>This is where the form controls will appear. 


</p> 
</form> 


This is where the form controls will appear. 


With the post method the 
values are sent in what are 
known as HTTP headers. As a 
rule of thumb you should use the 
post method if your form: 


allows users to upload a file 
is very long 


contains sensitive data 
(e.g. passwords) 


adds information to, or 
deletes information from, a 
database 


If the method attribute is not 
used, the form data will be sent 
using the get method. 


id 

We look at the id attribute on 
page 183, but the value is used to 
identify the form distinctly from 
other elements on the page (and 
is often used by scripts — such 
as those that check you have 
entered information into fields 
that require values). 


TEXT INPUT 


chapter-07/text-input.html 


<form action-"http://www.example.com/login.php"? 


<p>Username: 


<input type="text” name-" username" size="15”" 


maxlength="30" /> 


</p> 
</form> 


Username: 


size 

The size attribute should not 
be used on new forms. It was 
used in older forms to indicate 
the width of the text input 
(measured by the number of 


characters that would be seen). 


For example, a value of 3 would 
create a box wide enough to 
display three characters 


(although a user could enter 
more characters if they desired). 


In any new forms you write, 

CSS should be used to control 
the width of form elements. 

The size attribute is only 
mentioned here because you 
may come across it when looking 
at older code. 


<input> 


The <input> element is used 
to create several different form 
controls. The value of the type 
attribute determines what kind 
of input they will be creating. 


type="text" 

When the type attribute has a 
value of text, it creates a single- 
line text input. 


name 

When users enter information 
into a form, the server needs to 
know which form control each 
piece of data was entered into. 
(For example, in a login form, the 
server needs to know what has 
been entered as the username 
and what has been given as the 
password.) Therefore, each form 
control requires a name attribute. 
The value of this attribute 
identifies the form control and is 
sent along with the information 
they enter to the server. 


maxlength 

You can use the maxlength 
attribute to limit the number 

of characters a user may enter 
into the text field. Its value is the 
number of characters they may 
enter. For example, if you were 
asking for a year, the maxlength 
attribute could have a value of 4. 
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PASSWORD INPUT 


<j n D u t > chapter-07/password-input.html 


<form action="http://www.example.com/login.php"> 


<p>Username: 

ty p e=" p asswor d X <input. type="text" name=" "username" size-"15" 

When the type attribute has maxlength="30" /> 

a value of password it creates </p> 

a text box that acts just like a <p>Password: 

single-line text input, except <input type="password" name-"password" size="15" 

the characters are blocked out. maxlength="30" /> 

They are hidden in this way so </p> 

that if someone is looking over </form> 

the user's shoulder, they cannot 

see sensitive data such as 

passwords. | 

The name attribute indicates 

the name of the password input, Pametront: jessssss 

which is sent to the server with 

the password the user enters. 

size » Ma xlen g th Although the password is hidden For full security, the server needs 

It can also carry the size and on the screen, this does not to be set up to communicate 

maxlength attributes like the mean that the data in a password with users' browsers using 

the single-line text input. control is sent securely to the Secure Sockets Layer (SSL). The 
server. You should never use topic of SSL is beyond the scope 
these for sending sensitive data of this book, however there are 
such as credit card numbers. links to learn more about it on 


the accompanying website. 
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TEXI AREA 


chapter-07/textarea.html 


<form action="http://www.example.com/comments.php"> 
<p>What did you think of this gig?</p> 
<textarea name-"comments" cols-"20" rows="4">Enter 
your comments...</textarea> 


</form> 


What did you think of this gig? 


Enter your comments... 


If you are creating a new form, 
you should use CSS to control 
the width and height of a 
<textarea>. However, if you are 
looking at older code, you may 
see the cols and rows attributes 
used with this element. 


The cols attribute indicates 
how wide the text area should 
be (measured in numbers of 
characters). The rows attribute 
indicates how many rows 

the text area should take up 
vertically. 


<textarea> 


The <textarea> element 

is used to create a mutli-line 

text input. Unlike other input 
elements this is not an empty 
element. It should therefore have 
an opening and a closing tag. 


Any text that appears between 
the opening <textarea> and 
closing </textarea> tags will 
appear in the text box when the 
page loads. 


If the user does not delete any 
text between these tags, this 
message will get sent to the 
server along with whatever the 
user has typed. (Some sites 

use JavaScript to clear this 
information when the user clicks 
in the text area.) 
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RADIO BUTTON 


«input» 


type="radio" 
Radio buttons allow users to pick 
just one of a number of options. 


name 

The name attribute is sent to 
the server with the value of the 
option the user selects. When 

a question provides users with 
options for answers in the form 
of radio buttons, the value of 
the name attribute should be the 
same for all of the radio buttons 
used to answer that question. 


value 

The value attribute indicates 
the value that is sent to the 
server for the selected option. 
The value of each of the buttons 
in a group should be different 
(so that the server knows which 
option the user has selected). 


checked 

The checked attribute can be 
used to indicate which value Cif 
any) should be selected when 
the page loads. The value of this 
attribute is checked. Only one 
radio button in a group should 
use this attribute. 
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chapter-07/radio-button.html HTML 


<form action="http://www.example.com/profile.php"> 
<p>Please select your favorite genre: 
<br 7» 
<input type="radio" name="genre" value="rock" 
checked="checked" /> Rock 
<input type="radio" name-"genre" value-"pop" /> 


Pop 
<input type="radio" name="genre" value="jazz" /> 
Jazz 
</p> 
</form> 
Please select your favorite genre: 
O Rock © Pop @ Jazz 
Please note: Once a radio button option and want them to be 
has been selected it cannot be able to deselect it (for example 
deselected. The user can only if they are indicating they agree 
select a different option. If you to terms and conditions), you 
are only allowing the user one should use a checkbox instead. 


CHECKBOX 


HTML chapter-07/checkbox.html 


<form action="http://www.example.com/profile.php"> 
<p>Please select your favorite music service(s): 
&br 7» 
«input type-"checkbox" name-"service" 
value-"itunes" checked-"checked" /> iTunes 
«input type-"checkbox" name-"service" 
value-"lastfm" /> Last.fm 
«input type-"checkbox" name-"service" 
value-"spotify" /> Spotify 
</p> 
</form> 


Please select your favorite music service(s): 
M iTunes O Last.fm O Spotify 


<input> 


type="checkbox" 
Checkboxes allow users to select 
(and unselect) one or more 
options in answer to a question. 


name 

The name attribute is sent to 

the server with the value of the 
option(s) the user selects. When 
a question provides users with 
options for answers in the form 
of checkboxes, the value of the 
name attribute should be the 
same for all of the buttons that 
answer that question 


value 

The value attribute indicates 
the value sent to the server if this 
checkbox is checked. 


checked 

The checked attribute indicates 
that this box should be checked 
when the page loads. If used, its 
value should be checked. 
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DROP DOWN LIST BOX 


«select» 


A drop down list box (also 
known as a select box) allows 
users to select one option from a 
drop down list. 


The «select? element is used 
to create a drop down list box. It 
contains two or more «option»? 
elements. 


name 

The name attribute indicates the 
name of the form control being 
sent to the server, along with the 
value the user selected. 


«option» 


The «option? element is used 
to specify the options that the 
user can select from. The words 
between the opening «option»? 
and closing </option> tags will 
be shown to the user in the drop 
down box. 


value 

The «option? element uses the 
value attribute to indicate the 
value that is sent to the server 
along with the name of the 
control if this option is selected. 
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chapter-07/drop-down-list-box.html 


<form action="http://www.example.com/profile.php"> 
<p>What device do you listen to music on?</p> 


<select name="devices"> 


<option value="ipod">iPod</option> 
<option value="radio">Radio</option> 
<option value="computer">Computer</option> 


</select> 
</form> 


What device do you listen to music on? 


¥ iPod 


Computer 


selected 

The selected attribute can be 
used to indicate the option that 
should be selected when the 
page loads. The value of this 
attribute should be selected. 


If this attribute is not used, 

the first option will be shown 
when the page loads. If the user 
does not select an option, then 
the first item will be sent to 

the server as the value for this 
control. 


The function of the drop down 

list box is similar to that of the 

radio buttons (in that only one 

option can be selected). There 
are two key factors in choosing 
which to use: 


1. If users need to see all options 
at a glance, radio buttons are 
better suited. 


2. If there is a very long list 

of options (such as a list of 
countries), drop down list boxes 
work better. 


MULTIPLE SELECT BOX 


<form action="http://www.example.com/profile.php"> 
<p>Do you play any of the following instruments? ; 
(You can select more than one option by holding SIG 


chapter-07/multiple-select-box.html 


«select» 


down control on a PC or command key on a Mac 
while selecting different options. )</p> 
<select name-"instruments" size="3" 
multiple="multiple"> 
<option value-"guitar" selected="selected"> 
Guitar</option> 
<option value="drums">Drums</option> 
<option value-"keyboard" 
selected="selected">Keyboard</option> 
<option value="bass">Bass</option> 
</select> 


</form> 


Do you play any of the following instruments? (You can 


select more than one option by holding down control on a 


PC or command key on a Mac while selecting different 
options.) 


You can turn a drop down select 
box into a box that shows more 
than one option by adding the 
size attribute. Its value should 
be the number of options you 
want to show at once. In the 
example you can see that three 
of the four options are shown. 


Unfortunately, the way that 
browsers have implemented this 
attribute is not perfect, and it 
should be tested throroughly if 
used (in particular in Firefox and 
Safari on a Mac). 


multiple 

You can allow users to select 
multiple options from this list by 
adding the multiple attribute 


Guitar with a value of multiple. 
|Drums 

|Keyboard 

|Bass It is a good idea to tell users if 


they can select more than one 
option at a time. It is also helpful 
to indicate that on a PC they 
should hold down the control key 
while selecting multiple options 
and on a Mac they should use 
the command key while selecting 
options. 
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FILE INPUT BOX 


<j n D u t > chapter-07/file-input-box.html 


<form action-"http://www.example.com/upload.php" 


If you want to allow users to method="post"> 

upload a file (for example an <p>Upload your song in MP3 format:</p> 
image, video, mp3, or a PDF), <input type-"file" name-"user-song" /><br /> 
you will need to use a file input <input type="submit" value="Upload" /> 

box. </form> 


type-"file" 
This type of input creates a 
box that looks like a text input 


followed by a browse button. ( Browse... ) 
When the user clicks on the ( Upload ) 


browse button, a window opens 
up that allows them to select a 
file from their computer to be 
uploaded to the website. 


When you are allowing users 

to upload files, the method 
attribute on the «form» element 
must have a value of post. (You 
cannot send files using the HTTP 
get method.) 


When a user clicks on the 
browse button, the presentation 
of the window that allows 

them to browse for the file they 
want to upload will match the 
windows of the user's operating 
system. You cannot control the 
appearance of these windows. 
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SUBMIT BUTTON 


chapter-07/submit-button.html «1 n D u T > 


<form action="http://www.example.com/subscribe.php"> 
<p>Subscribe to our email list:</p> 
<input type="text" name="email" /> 
<input type="submit" name="subscribe" 
value=" Subsribe” 7> 
</form> 


type="submit" 
The submit button is used to 
send a form to the server. 


name 


It can use a name attribute but it 
does not need to have one. 


value 

The value attribute is used to 
control the text that appears 

on a button. It is a good idea to 
specify the words you want to 
appear on a button because the 
default value of buttons on some 


Subscribe to our email list: 


( Subscribe ) 
————— 


browsers is 'Submit query' and 
this might not be appropriate for 
all kinds of form. 


Different browsers will show 
submit buttons in different 
ways and tend to fit the visual 
presentation of the browser. 

If you want to control the 
appearance of a submit button, 
you can either use CSS (as you 
will learn on page 343), or you 
can use an image for the button. 
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IMAGE BUTTON 


<j n D u t > chapter-07/image-button.html 


<form action="http://www.example.org/subscribe.php"> 
<p>Subscribe to our email list:</p> 
<input type="text" name-"email" /> 
<input type-"image" src="images/subscribe. jpg" 
width="100" height="20" /> 
</form> 


type="image” 

If you want to use an image for 
the submit button, you can give 
the type attribute a value of 
image. The src, width, height, 
and alt attributes work just 

like they do when used with the 
«img? element (which we saw 
on pages 99-100). 


Subscribe to our email list: 


SUBSCRIBE 
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HTML chapter-07/button-and-hidden-controls.html 


<form action="http://www.example.com/add.php"> 
<button><img src-"images/add.gif" alt="add" 
width="10" height="10" /> Add</button> 
<input type="hidden" name-"bookmark" 


value="lyrics" /> 
</form> 


BUTTON & HIDDEN 


+ Add ) 


CONTROLS 


«button» 


The «button» element was 
introduced to allow users more 
control over how their buttons 
appear, and to allow other 
elements to appear inside the 
button. 


This means that you can 
combine text and images 
between the opening «button» 
tag and closing </button> tag. 


<input> 


type="hidden" 
This example also shows a 
hidden form control. These form 
controls are not shown on the 
page (although you can see them 
if you use the View Source option 
in the browser). They allow web 
page authors to add values to 
forms that users cannot see. 

For example, a web page author 
might use a hidden field to 
indicate which page the user was 
on when they submitted a form. 
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LABELLING FORM 


CONTROLS 


«label» 


When introducing form controls, 
the code was kept simple by 
indicating the purpose of each 
one in text next to it. However, 
each form control should have 
its own «label? element as this 
makes the form accessible to 
vision-impaired users. 


The «label» element can be 
used in two ways. It can: 


1. Wrap around both the text 
description and the form input 
(as shown on the first line of the 
example to your right). 


2. Be kept separate from the 
form control and use the for 
attribute to indicate which form 
control it is a label for (as shown 
with the radio buttons). 


for 

The for attribute states which 
form control the label belongs to. 
Note how the radio buttons use 
the id attribute. The value of the 
id attribute uniquely identifies an 
element from all other elements 
on a page. (The id attribute is 
covered on page 183.) 


The value of the for attribute 
matches that of the id attribute 
on the form control it is labelling. 
This technique using the for and 
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chapter-07/labelling-form-controls.html 


<label>Age: <input type="text" name-"age" /></label> 


<br/ > 
Gender: 


<input id-"female" type="radio" name-"gender" 


value="f"> 


<label for="female">Female</label> 
<input id="male" type="radio" name-"gender" 


value="m"> 


<label for="male">Male</label> 


Age: 


Gender: © Female © Male 


id attributes can be used on any 
form control. When a «label» 
element is used with a checkbox 
or radio button, users can click 
on either the form control or the 
label to select. The expanded 
clickable area makes the form 
easier to use. The position of the 
label is very important. If users 
do not know where to enter 
information or what information 
to enter, they are less likely to 
use the form correctly. 


As a rule of thumb, here are the 
best places to place labels on 
form controls. 


ABOVE OR T@ ThE MEET: 
Text inputs 
Text areas 
Select boxes 
File uploads 


TO THE RIGHT: 
Individual checkboxes 
Individual radio buttons 


GROUPING FORM 
ELEMENTS 


HTML chapter-07/grouping-form-elements.html 


<fieldset> 
<legend>Contact details</legend> 
<label>Email:<br /> 
<input type="text" name-"email" /></label><br /> 
<label>Mobile:<br /> 
<input type="text" name-"mobile" /></label><br /> 
<label>Telephone:<br /> 
<input type="text" name-"telephone" /></label> 
</fieldset> 


<fieldset> 


You can group related form 
controls together inside the 
<fieldset> element. This is 
particularly helpful for longer 
forms. 


Most browsers will show the 
fieldset with a line around 

the edge to show how they are 
related. The appearance of these 
lines can be adjusted using CSS. 


<legend> 


The «legend»? element can 
come directly after the opening 
<fieldset> tag and contains a 
caption which helps identify the 
purpose of that group of form 
controls. 
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HIML5: FORM VALIDATION 


dex uH chapter-07/htm15-form-validation.html 

messages if the form control has <form action="http://www.example.com/login/" 

not been filled in correctly; this is method="post"> 

known as form validation. <label for="username">Username:</label> 
<input type="text" name-"username" 

Traditionally, form validation required="required" /></title><br /> 

has been performed using <label for="password">Password:</label> 

JavaScript (which is beyond the <input type="password" name-"password" 

scope of this book). But HTML5 required-"required" /> 

is introducing validation and <input type="submit" value-"Submit" /> 

leaving the work to the browser. </form> 


Validation helps ensure the 
user enters information in a =] 
form that the server will be able 

to understand when the form Username: vy 

is submitted. Validating the 
contents of the form before it is 
sent to the server the helps: 


Password: ( Submit 


Please fill out this field. 


Reduce the amount of work 
the server has to do 
Enables users to see if there 


are problems with the form At the time of writing, only An example of HTML5 form 

faster than if validation were Chrome and Opera supported validation is the required 

performed on the server. HTMLS5 validation, although other attribute, which can be used on 
browsers are expected to follow. any form element that the user 


In order to support older browsers is expected to fill in. This HTML5 
(that do not understand HTML5), attribute does not need a value, 


web page authors are likely to but in HTML 4 all attributes must 
continue using JavaScript to have a value. So, some people give 
validate forms. this attribute a value of required. 
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<form action-"http://www.example.com/bookings/" 


HIML5: DATE INPUT 


chapter-07/html5-date-input.html 


method="post"> 


<label for="username">Departure date:</label> 
<input type-"date" name-"depart" /> 


<input type="submit" value-"Submit" /> 


</form> 


Departure date: 2011-06-27 


A 


( Submit ) 
MÀ 


«input» 


Many forms need to gather 
information such as dates, email 
addresses, and URLs. This has 
traditionally been done using 
text inputs. 


HTML5 introduces new form 
controls to standardize the 
way that some information is 
gathered. Older browsers that 
do not recognize these inputs 
will just treat them as a single 
line text box. 


type="date" 


If you are asking the user for a 
date, you can use an «input»? 
element and give the type 
attribute a value of date. 

This will create a date input in 
browsers that support the new 
HMTL5 input types. 


This example shows what the 
date input looks like in the Opera 
browser. The appearance of 

the date input changes across 
different browsers. 
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HIML5: EMAIL & URL INPUT 


«input» 


HTMLS5 has also introduced 
inputs that allow visitors to 
enter email addresses and URLs. 
Browsers that do not support 
these input types will just treat 
them as text boxes. 


type-"email" 

If you ask a user for an email 
address, you can use the email 
input. Browsers that support 
HTMLS5 validation will check 
that the user has provided 
information in the correct format 
of an email address. Some smart 
phones also optimize their 
keyboard to display the keys you 
are most likely to need when 
entering an email address (such 
as the @ symbol). 


type="url" 

A URL input can be used when 
you are asking a user for a web 
page address. Browsers that 
support HTML5 validation will 
check that the user has provided 
information in the format of 

a URL. Some smart phones 
also optimize their keyboard to 
display the keys you are most 
likely to need when entering a 
URL. 
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chapter-07/html5-email-input.html HTML 


<form action="http://www.example.org/subscribe.php"> 
<p>Please enter your email address:</p> 
<input type-"email" name-"email" /> 
<input type="submit" value-"Submit" /> 


</form> 
Please enter your email address: 
Please enter an email 
address. 
chapter-07/html5-url-input.html HTML 


<form action="http://www.example.org/profile.php"> 
<p>Please enter your website address:</p> 
<input type-"url" name-"website" /> 
<input type="submit" value-"Submit" /> 

</form> 


Please enter your website address: 


HIML5: SEARCH INPUT 


chapter-07/html5-search-input.html 


<form action="http://www.example.org/search.php"> 
<p>Search:</p> 
<input type-"search" name-"search" /> 
<input type="submit" value="Search" /> 


</form> 


Search: 


Thelonius (Search ) 


chapter-07/htm15-placeholder. html 


<form action="http://www.example.org/search.php"> 
<p>Search:</p> 
<input type-"search" name-"search" 
placeholder-"Enter keyword" /> 
<input type="submit" value-"Search" /> 


</form> 


Search: 


( Search ) 
) — 


<input> 


If you want to create a single 
line text box for search queries, 
HTMLS5 provides a special type 
of input for that purpose. 


type="search" 

If you want to create a single 
line text box for search queries, 
HTML5 provides a special 
search input. 


To create the HTML5 search box 
the «input» element should 
have a type attribute whose 
value is search. Older browsers 
will simply treat it like a single 
line text box. 


Recent browsers add some 
features that improve usability. 
For example, Safari on a Mac 
adds a cross to clear the search 
box when you have started to 
enter information. Safari also 
automatically rounds the corners 
on the search input field. 


placeholder 

On any text input, you can 

also use an attribute called 
placeholder whose value is 
text that will be shown in the 
text box until the user clicks in 
that area. Older browsers simply 
ignore this attribute. 
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@ Safari File Edit View History Bookmarks Develop Window. Help 


ane Forms 
4\* * + © http: / /www.htmlandcssbook.com /code/chapter-07 /example.html x 


— Your Details; -— 


Name: 
| Email: 


Your Review: 


| How did you hear about us? | Googie $) 


Would you visit again? 
Yes © No © Maybe 


Comments: 


| M Sign me up for email updates 


Submit review 


MacBook Pro 


169 FORMS 


EXAMPLE 
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i * Sun 12:19 


This example shows a feedback and newsletter 
sign-up form. It uses a variety of form controls. 


The «form»? element uses the action attribute to indicate the page that 
the data is being sent to. Each of the form controls sits inside the «form» 
element. Different types of form control are suited to collecting different 
types of data. The <fieldset> element is used to group related 
questions together. The «label» element indicates the purpose of each 
form control. 
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EXAMPLE 


FORMS 


<html> 
<head> 
<title>Forms</title> 
</head> 
<body> 
<form action-"http://www.example.com/review.php" method="get"> 
<fieldset> 
«legend»? 
Your Details: 
</legend> 
<label> 
Name: 
<input type="text" name="name" size-"30" maxlength="100"> 
</label> 
<br 75 
<label> 
Email: 
<input type-"email" name-"email" size="30" maxlength="100"> 
</label> 
<br 75 
</fieldset> 
<br /> 
<fieldset> 
<legend> 
Your Review: 
</legend> 
<p> 
<label for="hear-about"> 
How did you hear about us? 
</label> 
<select name="referrer" id="hear-about"> 
<option value="google">Google</option> 
<option value="friend">Friend</option> 
<option value="advert">Advert</option> 
<option value="other">0Other</option> 
</select> 
</p> 
<p> 
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Would you visit again? 
<br /> 
<label> 
<input type="radio" name="rating" value="yes" /> 
Yes 
</label> 
<label> 
<input type="radio" name-"rating" value-"no" /> 
No 
</label> 
<label> 
<input type="radio" name-"rating" value="maybe" /> 
Maybe 
</label> 
</p> 
<p> 
<label for="comments"> 
Comments: 
</label> 
<br 75 
<textarea rows="4" cols="40" id="comments"> 
</textarea> 
</p> 
<label> 
<input type="checkbox" name-"subscribe" checked-"checked" /> 
Sign me up for email updates 
</label> 
xbr 4» 
<input type="submit" value-"Submit review" /> 
</fieldset> 
</form> 
</body> 
</html> 
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SUMMARY 


FORMS 


Whenever you want to collect information from 
visitors you will need a form, which lives inside a 
«form»? element. 


Information from a form is sent in name/value pairs. 


Each form control is given a name, and the text the 
user types in or the values of the options they select 
are sent to the server. 


HTML5 introduces new form elements which make it 
easier for visitors to fill in forms. 


MARKUP 


> Specifying different versions of HTML 
> Identifying and grouping elements 
> Comments, meta information and iframes 


At this point, we have covered the main 
tags that fit nicely into groups and 
sections. 

In this chapter, we will focus on some helpful topics that are 
not easily grouped together. You will learn about: 


The different versions of HTML and how to indicate which 
version you are using 


How to add comments to your code 


Global attributes, which are attributes that can be used on 
any element, including the class and id attributes 


Elements that are used to group together parts of the page 
where no other element is suitable 


How to embed a page within a page using iframes 


How to add information about the web page using the 
«meta» element 


Adding characters such as angled brackets and copyright 
symbols 
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THE EVOLUTION OF HTML 


Since the web was first created, there have 
been several different versions of HTML. 


Each new version was designed 
to be an improvement on the 
last (with new elements and 
attributes added and older code 
removed). 


There have also been several 
versions of each browser used to 
view web pages, each of which 
implements new code. Not all 
web users, however, have the 
latest browsers installed on 
their computers, which means 
that not everyone will be able to 
view all of the latest features and 
markup. 


Where you should be 
particularly aware of browsers 
not supporting certain features, 
| have made a note of this (as 
you have seen with some of the 
HTML5 elements introduced in 
the Forms chapter — and as you 
will see in the CSS chapters). 
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HTML 4 


RELEASED 1997 


With the exception of a few 
elements added in HTML5 
(which have been highlighted), 
the elements you have seen in 
this book were all available in 
HTML 4. 


Although HTML 4 had some 
presentational elements to 
control the appearance of pages, 
authors are not recommended to 
use them any more. (Examples 
include the <center> element 
for centering content on a 

page, «font» for controlling 

the appearance of text, and 
<strike> to put a line through 
the text — all of these can be 
achieved with CSS instead.) 


XHTML 1.0 


RELEASED 2000 


In 1998, a language called XML 
was published. Its purpose 

was to allow people to write 
new markup languages. Since 
HTML was the most widely used 
markup language around, it was 
decided that HTML 4 should be 
reformulated to follow the rules 
of XML and it was renamed 
XHTML. This meant that 
authors had to follow some new, 
more strict rules about writing 
markup. For example: 


9 Every element needed a 
closing tag (except for empty 
elements such as <img />). 

9 Attribute names had to be in 
lowercase. 

* All attributes required a value, 
and all values were to be 
placed in double quotes. 

® Deprecated elements should 
no longer be used. 

® Every element that was 
opened inside another 
element should be closed 
inside that same element. 


The examples in this book all 
follow these strict rules of XML. 


One of the key benefits of this 
change was that XHTML works 
seamlessly with other programs 
that are written to create and 
process XML documents. 


It could also be used with other 
data formats such as Scalable 
Vector Graphics (SVG) — a 
graphical language written in 
XML, MathML (used to mark 
up mathematical formulae), and 
CML (used to mark up chemical 
formulae). 


In order to help web page 
authors move to this new syntax, 
two main flavors of XHTML 1.0 
were created: 
Strict XHTML 1.0, where 
authors had to follow the rules 
to the letter 
Transitional XHTML 1.0, 
where authors could still use 
presentational elements (such 
as <center> and <font>). 


The transitional version of 
XHTML was created because 

it allowed authors to continue 
to follow older practices (with a 
less strict syntax) and use some 
of the elements and attributes 
that were going to be removed 
from future versions of HTML. 


There was also a third version 

of XHTML 1.0 called XHTML 

1.0 Frameset, which allowed 
web page authors to partition 

a browser window into several 
"frames," each of which would 
hold a different HTML page. 
These days, frames are very 
rarely used and are being phased 
out. 


HTML5 


RELEASED 2000 


In HTMLS5, web page authors do 
not need to close all tags, and 
new elements and attributes will 
be introduced. At the time of 
writing, the HTML5 specification 
had not been completed, but 
the major browser makers had 
started to implement many of 
the new features, and web page 
authors were rapidly adopting 
the new markup. 


Despite the fact that HTML5 

is not yet completed, you can 
safely take advantage of the 
new features of the language as 
long as you endeavour to ensure 
that users with older browsers 
will be able to view your pages 
(even though some of the extra 
features will not be visible to 
them). 
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DOCTYPES 


Because there have been 
several versions of HTML, each 
web page should begin with a 
DOCTYPE declaration to tell a 
browser which version of HTML 
the page is using (although 
browsers usually display the 
page even if it is not included). 
We will therefore be including 
one in each example for the rest 
of the book. 


As you will see when we come to 
look at CSS and its box model on 
page 316, the use of a DOCTYPE 
can also help the browser to 
render a page correctly. 


Because XHTML was written 

in XML, you will sometimes 

see pages that use the XHTML 
strict DOCTYPE start with 

the optional XML declaration. 
Where this is used, it should be 
the first thing in a document. 
There must be nothing before it, 
not even a space. 
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HTML5 
<!DOCTYPE html» 


HTML 4 


<!DOCTYPE htm] PUBLIC 
"-/[W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3.org/TR/htm14/loose.dtd"> 


Transitional XHTML 1.0 


<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm1 1/DTD/ 
xhtmll-transitional.dtd"» 


Sere. nile 1.0) 


<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtm1 1/DTD/ 
xhtmll1-strict.dtd"» 


XML Declaration 


<?xml version-"1.0" ?> 


COMMENTS IN HTML 


HTML chapter-08/comments-in-html.html 
«tee start of Introduction => 


<hl>Current Exhibitions</h1> 
<h2>0lafur Eliasson</h2> 
«1-- end of introduction ==> 
l= Stare GT malm texte =e 
<p>Olafur Eliasson was born in Copenhagen, Denmark 
in 1967 to Icelandic parents.</p> 
<p>He is known for sculptures and large-scale 
installation art employing elemental materials 
such as light, water, and air temperature to 
enhance the viewer's experience.</p> 
<!-- end of main text --> 
<2 
<a href="mailto:info@example.org">Contact</a> 
Be 


Current Exhibitions 


Olafur Eliasson 


Olafur Eliasson was born in Copenhagen, Denmark in 1967 ta 
Icelandic parents. 


He is known for sculptures and large-scale installation art 
employing elemental materials such as light, water, and air 
temperature to enhance the viewer's experience. 


quoc» 


If you want to add a comment 
to your code that will not be 
visible in the user's browser, you 
can add the text between these 
characters: 


<!-- comment goes here --> 


It is a good idea to add 
comments to your code because, 
no matter how familiar you 

are with the page at the time 

of writing it, when you come 
back to it later (or if someone 
else needs to look at the code), 
comments will make it much 
easier to understand. 


Although comments are not 
visible to users in the main 
browser window, they can be 
viewed by anyone who looks at 
the source code behind the page. 


On a long page you will often 
see comments used to indicate 
where sections of the page start 
or end, and to pass on notes to 
help anyone who is looking at 
the code understand it. 


Comments can also be used 
around blocks of code to stop 
that code from being displayed 

in the browser. In the example on 
the left, the email link has been 
commented out. 
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ID ATTRIBUTE 


RN E chapter-08/id-attribute.html 
uniquely identify that element <p>Water and air. So very commonplace are these 

from other elements on the substances, they hardly attract attention - and 

page. Its value should start with yet they vouchsafe our very existence.</p> 

a letter or an underscore (not a <p id="pullquote">Every time I view the sea I feel 
number or any other character). a calming sense of security, as if visiting my 

It is important that no two ancestral home; embark on a voyage of seeing. 
elements on the same page </p> 

have the same value for their id <p>Mystery of mysteries, water and air are right 
attributes (otherwise the value is there before us in the sea.</p> 


no longer unique). 


As you will see when you 
come to look at CSS in the next 
section, giving an element a 


unique identity allows you to Water and air. So very commonplace are these 
style it differently than any other substances, they hardly attract attention - and yet 
instanceof the same element they vouchsafe our very existence. 

en the paga. For exemple, EVERY TIME I VIEW THE SEA I FEEL A 
you might want to assign one CALMING SENSE OF SECURITY, AS IF 
paragraph within the page VISITING MY ANCESTRAL HOME; I 


Goer nape aparaetapn contain EMBARK ON A VOYAGE OF SEEING. 


a pull quote) a different style Mystery of mysteries, water and air are right there 
than all of the other paragraphs. before us in the sea. 

In the example on the right, the 

paragraph with the id attribute 

whose value is pullquote is 

made uppercase using CSS. 


If you go on to learn about 
JavaScript (a language that 
allows you to add interactivity to 
your pages), id attributes can be 
used to allow the script to work 
with that particular element. 


The id attribute is known as a 


global attribute because it can 
be used on any element. 
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chapter-08/class-attribute.html 


a 


i 
(0) 


CLASS ATTRIBUTE 


a one-year 
ugame Genic 


Sugimoto ex 
ks by the a 
alized under 


y Art (MIMOCA) will 


period from 
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the headings 
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Religi 
panora 


on" so as to p 
a of the artis 


— 
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re," "History 
esent a comp 
t's oeuvre.</p> 
<p class="important admittance"»Hours: 
7:30)</p> 


" and 


ehensive 


10:00 - 18:00 


FOR A ONE-YEAR PERIOD FROM NOVEMBER 2010, 
THE MARUGAME GENICHIRO-INOKUMA MUSEUM 
OF CONTEMPORARY ART (MIMOCA) WILL HOST A 
CYCLE OF FOUR HIROSHI SUGIMOTO EXHIBITIONS. 


Each will showcase works by the artist thematically 
contextualized under the headings "Science," "Architecture," 
"History" and "Religion" so as to present a comprehensive 
panorama of the artist's oeuvre. 


HOURS: 10:00 


By default, using these attributes 
does not affect the presentation 
of an element. It will only change 
their appearance if there is a CSS 
rule that indicates it should be 
displayed differently. 


18:00 (NO ADMITTANCE AFTER 17:301 


In this example, CSS has been 
applied to make elements with 
a class attribute whose value 
is important uppercase, and 
elements with a class attribute 


whose value is admittance red. 


Every HTML element can 

also carry a class attribute. 
Sometimes, rather than uniquely 
identifying one element within 

a document, you will want a 
way to identify several elements 
as being different from the 

other elements on the page. 

For example, you might have 
some paragraphs of text that 
contain information that is more 
important than others and want 
to distinguish these elements, or 
you might want to differentiate 
between links that point to other 
pages on your own site and links 
that point to external sites. 


To do this you can use the 
class attribute. Its value 
should describe the class it 
belongs to. In the example on 
the left, key paragraphs have a 
class attribute whose value is 
important. 


The class attribute on any 
element can share the same 
value. So, in this example, the 
value of important could be 
used on headings and links, too. 


If you would like to indicate that 
an element belongs to several 
classes, you can separate class 
names with a space, as you can 
see in the third paragraph in the 
example above. 
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BLOCK ELEMENTS 


Some elements will always 

appear to start on a new line in 
the browser window. These are 
known as block level elements. 


Examples of block elements are 
<h1>, <p>, <ul>, and <1i>. 
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chapter-08/block-elements.html 


«hl»Hiroshi Sugimoto</h1> 
<p>The dates for the ORIGIN OF 
follows:</p> 
<ul> 
«li»Science: 21 Nov - 20 Feb 
«li»Architecture: 6 Mar - 15 
«li»History: 29 May - 21 Aug 
<1i>Religion: 28 Aug - 6 Nov 
</ul> 


Hiroshi Sugimoto 


ART 


20 


exhibition are as 


0/11</1i> 


May 2011</1i> 


20 
20 


IET A 
1</1i> 


The dates for the ORIGIN OF ART exhibition are as follows: 


History: 29 May - 21 Aug 2011 
Religion: 28 Aug - 6 Nov 2011 


Science: 21 Nov - 20 Feb 2010/11 
Architecture: 6 Mar - 15 May 2011 


INLINE ELEMENTS 


z Some elements will always 
HTML chapter-08/inline-elements.html : 
appear to continue on the 
Timed to a single revolution of the planet around same line as their neighbouring 
the sun at a 23.4 degrees tilt that plays out the elements. These are known as 
rhythm of the seasons, this <em>Origins of Art</em> inline elements. 


cycle is organized around four themes: <b>science, 
architecture, history</b> and <b>religion</b>. 


Examples of inline elements are 
<a>, <b>, <em>, and <img>. 


Timed to a single revolution of the planet around the sun at a 23.4 
degrees tilt that plays out the rhythm of the seasons, this Origins of 
Art cycle is organized around four themes: science, architecture, 
history and religion. 
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GROUPING TEXT & 
ELEMENTS IN A BLOCK 


e 
<d ] v> chapter-08/grouping-block-elements.html HTML 


<div id="header"> 


The <div> element allows you to <img src-"images/logo.gif" alt="Anish Kapoor" /> 
group a set of elements together <ul> 
in one block-level box. <li><a href="index.html">Home</a></1i> 
<li><a href="biography.html">Biography</a></1i> 
For example, you might create <li><a href="works.html">Works</a></1i> 
a <div> element to contain all <li><a href="contact.html">Contact</a></1i> 
of the elements for the header </ul> 
of your site (the logo and the </div><!-- end of header --> 


navigation), or you might create 
a <div> element to contain 
comments from visitors. 


In a browser, the contents of 

the <div> element will start on 

a new line, but other than this 

it will make no difference to the ANISH KAPOOR 
presentation of the page. 


Using an id or class attribute e Home 
on the <div> element, however, e Biography 
means that you can create * Works 


e Contact 


CSS style rules to indicate how 
much space the <div> element 
should occupy on the screen and 
change the appearance of all the 
elements contained within it. 


It can also make it easier to Since there may be several This allows you to clearly see 

follow your code if you have used other elements inside a «div» which opening tag it is supposed 

<div> elements to hold each element, it can be helpful to add to correspond to, as shown at 

section of the page. a comment after the closing the end of the example here. 
</div> tag. 
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GROUPING TEXT & 
ELEMENTS INLINE 


HTML chapter-08/grouping-inline-elements.html 


<p>Anish Kapoor won the Turner Prize in 1991 and 
exhibited at the <span class="gallery">Tate 
Modern</span> gallery in London in 2003.</p> 


Anish Kapoor won the Turner Prize in 1991 and exhibited at the 
TATE MODERN gallery in London in 2003. 


<span> 


The <span> element acts like 
an inline equivalent of the <div> 
element. It is used to either: 


1. Contain a section of text 
where there is no other suitable 
element to differentiate it from 
its surrounding text 


2. Contain a number of inline 
elements 


The most common reason why 
people use <span> elements 
is so that they can control the 
appearance of the content of 
these elements using CSS. 


You will usually see that a class 
or id attribute is used with 
<span> elements: 


® To explain the purpose of this 
<span> element 


So that CSS styles can be 
applied to elements that 
have specific values for these 
attributes 
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IFRAMES 


<j frame> chapter-08/iframes.html 


<iframe 
An iframe is like a little window width="450" 
that has been cut into your height="350" 
page — and in that window you src="http://maps.google.co.uk/maps?q=moma+newtyork 
can see another page. The term &amp ; output=embed"> 
iframe is an abbreviation of inline </iframe> 


frame. 


One common use of iframes 
(that you may have seen on 

various websites) is to embed 

a Google Map into a page. The 
content of the iframe can be any 

html page (either located on the 

same server or anywhere else on 
the web). 


GEO. 2 meee  m-cNEB a 


An iframe is created using the 
<iframe> element. There area 
few attributes that you will need 
to know to use it: 


SPC 
The src attribute specifies the 
URL of the page to show in the 
frame. 


height 
The height attribute specifies 
the height of the iframe in pixels. 


width 


The width attribute specifies 
the width of the iframe in pixels. 
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HTML chapter-08/iframes-continued.html 


«iframe 
src="http://maps.google.co.uk/maps?q=moma+newtyork 
&amp;output-embed" 
width-"450" 
height-"350" 
frameborder-"0" 
scrolling="no"> 

</iframe> 


scrolling 

The scrolling attribute will 

not be supported in HTMLS. In 
HTML 4 and XHTML, it indicates 
whether the iframe should 

have scrollbars or not. This is 
important if the page inside the 
iframe is larger than the space 
you have allowed for it (using the 
height and width attributes). 
Scrollbars allow the user to move 
around the frame to see more 
content. It can take one of three 
values: yes (to show scrollbars), 
no (to hide scrollbars) and auto 
(to show them only if needed). 


frameborder 

The frameborder attribute will 
not be supported in HTML5. In 
HTML 4 and XHTML, it indicates 
whether the frame should have 

a border or not. A value of 0 
indicates that no border should 
be shown. A value of 1 indicates 
that a border should be shown. 


seamless 

In HTMLS5, a new attribute 
called seamless can be applied 
to an iframe where scrollbars 
are not desired. The seamless 
attribute (like some other new 
HTMLS5 attributes) does not 
need a value, but you will often 
see authors give it a value of 
seamless. Older browsers 

do not support the seamless 
attribute. 
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191 


INFORMATION ABOUT 
YOUR PAGES 
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«meta» 


The «meta» element lives 
inside the «head» element and 
contains information about that 
web page. 


It is not visible to users but 
fulfills a number of purposes 
such as telling search engines 
about your page, who created 

it, and whether or not it is time 
sensitive. (If the page is time 
sensitive, it can be set to expire.) 


The «meta» element is an empty 
element so it does not have a 
closing tag. It uses attributes to 
carry the information. 


The most common attributes 
are the name and content 
attributes, which tend to be 
used together. These attributes 
specify properties of the entire 
page. The value of the name 
attribute is the property you 
are setting, and the value of the 
content attribute is the value 
that you want to give to this 
property. 


In the first line of the example on 
the opposite page, you can see a 
«meta» element where the name 
attribute indicates an intention 
to specify a description for the 
page. The content attribute is 
where this description is actually 
specified. 


The value of the name attribute 
can be anything you want it to 
be. Some defined values for this 
attribute that are commonly 
used are: 


description 

This contains a description 

of the page. This description 

is commonly used by search 
engines to understand what the 
page is about and should be a 
maximum of 155 characters. 
Sometimes it is also displayed in 
search engine results. 


keywords 

This contains a list of comma- 
separated words that a user 
might search on to find the page. 
In practice, this no longer has 
any noticeable effect on how 
search engines index your site. 


robots 

This indicates whether search 
engines should add this page 

to their search results or not. A 
value of noindex can be used if 
this page should not be added. A 
value of nofollow can be used 

if search engines should add this 
page in their results but not any 
pages that it links to. 


The «meta»? element also 
uses the http-equiv and 
content attributes in pairs. 
In our example, you can see 


ETE 


<!DOCTYPE html» 
«html» 
<head> 


chapter-08/meta.html 


<title>Information About Your Pages</title> 
«meta name-"description" 
content-"An Essay on Installation Art" /> 
«meta name-"keywords" 
content-" installation, art, opinion" /> 
«meta name-"robots" 
content-"nofollow" /> 
«meta http-equiv-"author" 
content="Jon Duckett" /> 
«meta http-equiv-"pragma" 
content-"no-cache" /> 
«meta http-equiv-"expires" 
content-"Fri, 04 Apr 2014 23:59:59 GMT" /> 


three instances of the http- 
equiv attribute. Each one has a 
different purpose: 


author 
This defines the author of the 
web page. 


pragma 

This prevents the browser from 
caching the page. (That is, 
storing it locally to save time 
downloading it on subsequent 


</head> visits.) 

<body> 

</body> q 
</html> expires 


Because browsers often cache 
the content of a page, the 
expires option can be used 

to indicate when the page 

should expire (and no longer be 
cached). Note that the date must 
be specified in the format shown. 
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ESCAPE CHARACTERS 


There are some characters that are used in 
and reserved by HTML code. (For example, the 
left and right angled brackets.) 


Therefore, if you want these There are also special codes When using escape characters, 
characters to appear on your that can be used to show itis important to check the 
page you need to use what are symbols such as copyright and page in your browser to ensure 
termed "escape" characters trademark, currency symbols, that the correct symbol shows 
(also known as escape codes or mathematical characters, and up. This is because some fonts 
entity references). For example, some punctuation marks. For do not support all of these 

to write a left angled bracket, example, if you want to include a characters and you might 

you can use either &1t; or copyright symbol on a web page therefore need to specify 
&#60;. For an ampersand, you you can use either &copy ; or a different font for these 

can use either &amp; or &1:38;. 81H69;. characters in your CSS code. 


ONLINE EXTRA 

You can find a more complete 
list of escape codes in the 
tools section of the website 
accompanying this book. 
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Less-than sign 
&lt; 
81:60; 


Greater-than sign 
&gt; 
&amp; 


Ampersand 
&amp; 
8138; 


Quotation mark 
&quot; 
8134; 


a o db K nm e 


Cent sign 
&cent; 
8162; 


Pound sign 
&pound; 
81H63; 


Yen sign 
&yen; 
811165; 


Euro sign 
&euro; 
8118364; 


Copyright symbol 
&copy; 
811169; 


Registered trademark 
&reg; 
81H74; 


Trademark 
&trade; 
&8482; 


11 
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Left single quote 
&lsquo; 
81/8216; 


Right single quote 
&rsquo; 
818217; 


Left double quotes 
&ldquo; 
818220; 


Right double quotes 
&rdquo; 
81/8221; 


Multiplication sign 
&times; 
811215; 


Division sign 
&divide; 
81:247; 
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Contact The Art Bookshop, London UK 


The Art Book Shop 


Channg Cross Road, London, WC2, UK 


ye 


Telephone 0207 946 0946 


ss 


A Contat the art to 


This example starts by using a content. Several elements use Parts of the page have been 
DOCTYPE to indicate that this the id and class attributes grouped using <div> elements, 
isan HTML 4 web page. In the to identify their purpose. The and comments have been added 
head, you can also see a <meta> copyright symbol has been to indicate what the </div> 

tag describing the page's added using an escape code. elements are closing. 
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<!DOCTYPE html PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html14/10oose.dtd"? 
<html> 
<head> 
<meta name="description" content="Telephone, email 
and directions for The Art Bookshop, London, UK" /> 
<title>Contact The Art Bookshop, London UK</title> 
</head> 
<body> 
<div id="header"> 
<hl>The Art Book Shop</h1> 
<ul> 
<li><a href="index.html">home</a></1i> 
<li><a href-"index.html"»new publications</a> 
</i> 
<li class="current-page"> 
<a href="index.html">contact</a></1i> 
</ul> 
</div><!-- end header --> 
<div id="content"> 
<p>Charing Cross Road, London, WC2, UK</p> 
<p><span class="contact">Telephone</span> 
0207 946 0946</p> 
<p><span class="contact">Email</span> 
<a href="mailto:books@example.com"> 
books@example.com</a></p> 
<iframe width="425" height="275" frameborder="0" 
scrolling="no" marginheight="0" marginwidth="0" 
src="http://maps.google.co.uk/maps? f=q&amp ; 
source=s_q&amp;hl=en&amp ; geocode=&amp ; 
q=charing+cross+road+] ondon&amp ; output=embed"> 
</iframe> 
</div><!-- end content --> 
<p>&copy; The Art Bookshop</p> 
</body> 
</html> 
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SUMMARY 


EXTRA MARKUP 


DOCTYPES tell browsers which version of HTML you 
are using. 


You can add comments to your code between the 
<!-- and --> markers. 


The id and class attributes allow you to identify 
particular elements. 


The <div> and <span> elements allow you to group 
block-level and inline elements together. 


<iframes> cut windows into your web pages through 
which other pages can be displayed. 


The <meta> tag allows you to supply all kinds of 
information about your web page. 


Escape characters are used to include special 
characters in your pages such as <, >, and ©. 


FLASH, VIDEO 


& AUDIO 


> How to add Flash movies into your site 
> How to add video and audio to your site 
> HTML5 <video> and «audio» elements 


Flash is a very popular technology used 


to add animations, video, and audio to 
websites. This chapter begins by looking 
at how to use it in your web pages. 

We then focus on how to add video and audio to your site, 
using either the new HTML5 «video» and «audio» elements 


or a hosted service (such as YouTube or SoundCloud). In this 
chapter you will learn: 


* How to use Flash in your web pages 
* How to use HTML5 <video> and «audio» elements 


* When to host your own video and audio and when to use a 
service such as YouTube 


ek Safari file Edit View History Bookmarks Develop Window Help :24 M O t = E) * unii Q 


ane Flash, Video and Audio 
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MacBook Pro 


HOW FLASH WORKS 


Since the late 1990s, Flash has been a very 
popular tool for creating animations, and later 
for playing audio and video in websites. 


Whether you are creating an 
animation or a media player in 
Flash, the files you put on your 
website are referred to as Flash 
movies. 


If you want to create your 
own Flash movie, you need to 
purchase the Flash authoring 
environment from Adobe. 


There are, however, several 
companies that offer Flash 
animations and slideshows, 

as well as video and audio 
players that you can use without 
purchasing this tool. 


ME aa 


PA UT 


A 


PITT 


The Flash authoring environment 
is used to create Flash Movies. 
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When you create a Flash file in 
the Flash authoring environment, 
it is saved with the .f1a file 
extension. In order to use this file 
on a web page it has to be saved 
in a different format known 

as SWF. (It has the . swf file 
extension.) 


When you export the movie 
into SWF format, Flash creates 
code that you can use to embed 
the Flash movie in your page. 
Traditionally, this code used the 
HTML <object> and <embed> 
tags. However, now it is more 
common to use JavaScript. 


The .f1a file is exported to .swf 
format to use in a web page. 


To view Flash, browsers need 

to use a plugin (an extra piece 
of software that runs in the 
browser) called the Flash Player. 
Statistics commonly indicate 
that 98% of browsers on 
desktop computers have the 
Flash plugin installed. (The 
percentage of mobiles and 
tablets with it is much less.) 


There is not space in this book 
to teach you how to create Flash 
movies (there are many books 
devoted to that one topic), but 
this chapter will show you how 
to add Flash movies to your site. 


The .swf file is included in your 
web page using JavaScript. 


When Flash was first released, 
it was developed to create 
animations. The technology 
quickly evolved, however, and 
people started to use it to build 
media players and even entire 
websites. 


Although Flash is still very 
popular, in recent years people 
have been more selective about 
when they use it (and now rarely 
consider building an entire 
website in Flash). 


Despite this, Flash does have a 
future on the web because there 
are some things it does very well, 
such as creating animations. 


USE OF FLASH 


Since 2005, a number of factors have meant 
that fewer websites are written in Flash or even 
use elements of Flash in their pages. 


There are several reasons why 
fewer websites are using Flash 
these days, including: 


In 2005-6, a set of JavaScript 
libraries were launched 
(including Prototype, 
script.aculo.us, and JQuery) 
which made it easier for people 
to create animated effects using 
JavaScript. 


When Apple launched the 
iPhone in 2007 and later the 
the iPad in 2010, they took the 
decision not to support Flash. 


There have been laws introduced 
to ensure that websites are 
usable by those with visual or 
physical impairments — and 
Flash has been criticized because 
Flash content does not always 
meet accessibility requirements. 


In 2008, browsers started to 
support HTML5 <video> and 
«audio» tags. At the time of 
writing, Flash is still a popular 
way of playing video and audio 
on the web but more and more 
people are switching to HTML5. 


(You will see how to use these 
elements later in the chapter.) 
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TIMELINE: 
FLASH, VIDEO & AUDIO 


Web technologies change quickly. Here you 
can see some of the changes in how animation, 
video, and audio are created on the web. 


1995 1996 1997 1998 1999 2000 2001 2002 2003 


FutureSplash, forerunner to | Flash 


ANIMATION 


RealAudio streaming audio 
Flash | 4 streaming audio 


AUDIO 


RealVideo streaming video 
RealVideo 8 streaming video 


Flash MX Flash video 


VIDEO 
On this page you can see the On the facing page, you can see 
first major players to provide some of the technologies and 
web animation, audio, and video. events replacing them. 
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VIDEO sharing sites offer alternatives to self-hosting 
Vimeo launched 
YouTube launched 
YouTube releases iPhone app 
Vimeo releases HTML5 player 
YouTube releases HTMLS5 player 


Vimeo releases iPhone app 


2004 2005 2006 2007 2008 2009 2010 201 


Internet Explorer 9 
Opera 9|.62 
Firefox 3.5 
Chrome 3 
Safari 3.1 
BROWSERS introduce HTML5 <video> and «audio? tags 


iPad 
iPhone 


APPLE releases devices that don't support Flash 


jQuery 
script.aculo.us 


Prototype 
JAVASCRIPT libraries are written to create animated effects 
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ADDING A FLASH MOVIE 
TO YOUR WEB PAGE 


The most popular way of 
adding Flash into a web page 

is using JavaScript. There are 
several scripts that allow you 
to do this without an in-depth 
understanding of the JavaScript 
language. 


The script we will be looking at 
here is called SWFObject. You 
can obtain a copy of it for free 
from Google, and you can see 
how we use it on the next page. 


One advantage to using this 
technique is that it allows 
browsers to show alternative 
content for users whose 
browsers are not capable of 
showing Flash. 


This technique uses a <div> 
element to create a space where 
the Flash movie should sit. 

The «div» element has an id 
attribute whose value is used 

by the SWFObject script. In this 
example, the value of the id 
attribute is bird. 


Inside the «div» element you 
can place the alternative content 
for users who are not able to 
play Flash. 
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chapter-09/adding-a-flash-movie.html 


<!DOCTYPE html» 
«html» 
<head> 


<title>Adding a Flash Movie</title> 

<script type-"text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/ 
swfobject/2.2/swfobject.js"></script> 

<script type="text/javascript"> 
swfobject.embedSWF("flash/bird.swf", 
“bird, "400", "300", “8.0.0")s</ seript> 


</head> 
<body> 


<div id="bird"><p>An animation of a bird taking 


a shower</p></div> 


</body> 
</htm1> 


The SWFObject script will check 
to see if the user's browser can 
play the Flash movie. If it can, the 
script will replace the content of 
the <div> with the .swf file. 


For users who cannot see the 
Flash movie, you could show a 
still from the movie instead. You 
might also like to consider using 
a text description of the Flash 
file. 


If you use a text description as 
alternative content, then you can 
achieve two further benefits: 


1. The text can be accessed by 
those with visual and/or physical 
impairments who are not able to 
interact with the Flash file. 


2. The text can be indexed by 
search engines (which are not as 
effective at indexing SWF files), 
increasing the chance that your 
content will be found. 


In this example, the SWFObject 
script is hosted on Google's 
servers. We include the script in 
this web page using the first of 
the two «script? elements. 


The type attribute is used on the 
<script> element to indicate 
that the script inside is written 
in JavaScript. The src attribute 
tells the browser where to find 
the script. 


The second <script> element 
is used to tell the browser about 
the Flash movie, as well as which 
element it should replace. This 
element is actually telling the 
SWFObject script five pieces 

of information, which are in the 
brackets: 


1. The location of the .swf file: 
flash/bird.swf 


2. The element that the Flash 
movie should replace, specified 
by the value of the id attribute 
on the <div> element: 

bird 


3. The width of the Flash movie: 
400 px 


4. The height of the Flash movie: 
300 px 


5. The minimum version of the 
Flash player needed to view the 
movie: 

Flash Player 8 
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UNDERSTANDING VIDEO 
FORMATS AND PLAYERS 


To add video to your site, there are two key 
issues to understand: file formats and video 


players/plugins. 


FORMATS 


Movies are available in many 
formats (BluRay, DVD, VHS, 
to name a few). Online, there 
are even more video formats 
(including AVI, Flash Video, 
H264, MPEG, Ogg Theora, 
QuickTime, WebM, and 
Windows Media). 


Just as your DVD player won't 
play a VHS cassette, browsers 
differ in what video formats they 
do and don't support. 


In order for users to view your 
video online, you may need to 
convert it to another format. 


The process of converting 
a video into another format 
is sometimes referred to as 
"encoding" the video. 


There are several apps available 
on the web that enable you to 
encode videos (such as www. 
mirovideoconverter.com). 
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PLAYERS / PLUGINS 


Browsers were initially designed 
to show text and images only. 
For this reason, browsers built 
prior to 2010 generally required 
another program called a player 
or plugin to to be installed in 
order to play video content. 


These players and plugins only 
supported certain video formats. 


Recently browsers have evolved 
to support the HTML5 <video> 
tag (which renders players and 
plugins obsolete). 


Unfortunately, however, you 
cannot rely on every visitor to 
your website having a recent 
browser that supports this 

new HTML5 element and the 
browsers that do recognize the 
<video> element require the 
video to be encoded in different 
formats. 


APPROACH 


The easiest way to add video 
to your site is to use a hosted 
service such as YouTube or 
Vimeo. 


However, there are some cases 
where using these services is 
not appropriate (as you will see 
on the next page) and you will 
want to host the video on your 
own site. 


At the time of writing, to ensure 
most people can play your 
video content, it is considered 
best practice to use the HTML5 
<video> element for browsers 
that support it, and also Flash 
video for those that do not.This 
means you would need to upload 
any videos you want to show in 
at least two different formats: 
WebM and MP4. 


ADVANTAGES 


Hosted video sites (such as 
YouTube) provide players that 
work with the majority of web 
browsers. 


You do not need to worry about 
encoding your video since 

these sites allow you to upload 
your content in a range of 
formats. Once uploaded, they 
automatically convert your video 
into the various formats required 
by different browsers. 


Web hosting companies often 
charge extra if you use a lot of 
bandwidth, and video files can 
be quite large. Therefore, it can 
cost you extra to host the videos 
on your own site. If your video 

is hosted on a site like YouTube 
or Vimeo, however, you do not 
need to pay for the bandwidth. 


USING HOSTED 
VIDEO SERVICES 


The easiest way to add a video to your site is 
to upload the video to a site like YouTube or 
Vimeo and use the features provided on their 
site to embed the video in your page. 


DISADVANTAGES 


Your video will be available on 
the site of the hosted service, 

so if you want the content to be 
exclusively available on your site 
(and not visible on other sites), 
you need to host the video on 
your own server and add your 
own player into the page. 


Some services will limit what 
your video is allowed to include. 
For example, most prohibit 

the use of advertising within 
the video you upload (which 
prevents you from monetizing 
that content). 


Some hosted services will play 
their own adverts before your 
video will begin, or even overlay 
them over the screen as your 
video is playing. The quality of 
video on some hosted services 
can also be limited. 


THE ALTERNATIVE 


If you want to host video on your 
own site - rather than a hosted 
service - a lot more work is 
involved in setting up your site to 
play the video. 


We will be looking at two 
different ways that you can host 
your own videos: using both 
Flash Video and the HTML5 
<video> element. 


In order to ensure that the 
maximum number of visitors to 
your site can see the video, you 
will need to use a combination of 
both of these techniques. 
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PREPARING A FLASH 
VIDEO FOR YOUR SITE 


There are three steps you need to follow to add 
a Flash Video to your web page: 


CONVERT YOUR VIDEO 
INTO FLV FORMAT 


To play a Flash Video, you need 
to convert your video into FLV 
format. Since Flash 6, the Flash 
authoring environment has come 
with a Flash Video Encoder to 
convert videos into FLV format. 


Some Flash video players 

also support a format called 
H264 (and some video editing 
programs export video in this 
format). 


Googling "FLV or H264 
converters" will allow you to find 
alternative encoding software. 


| have provided a sample FLV 

file that you can use with the 
download code on the website 
(It is in a separate folder because 
the video files are large.) 
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FIND AN FLV PLAYER TO 
PLAY THE VIDEO 


You'll need a player written in 
Flash to play the FLV file. Its 
purpose is to hold the FLV movie 
and add controls such as 
play/pause. Here are two sites 
that offer FLV players: 


www.osflv.com 
www.longtailvideo.com 


You do not need the Flash 
authoring environment to use 
either of these on your website. 


In the following example, we will 
use the OS FLV player, which is 
a free, open-source Flash Video 
player. This is included in the 
download code. It only supports 
the FLV format (not H264). 


INCLUDE THE PLAYER & 
VIDEO IN YOUR PAGE 


You can include the player in 
your page using a JavaScript 
technique such as SWFObject, 
which was mentioned earlier in 
this chapter. 


You will also need to tell the 
player where it can find the video 
file that you want it to play. 
(Some players have advanced 
features such as the ability 

to create playlists of multiple 
videos, or add a still picture 
before the video plays.) 


In the following example, we will 
also be using the SWFObject 
JavaScript technique mentioned 
on pages 207-208. 


ADDING A FLASH VIDEO 
TO YOUR PAGES 


STDOCTYPE. html» 
«html» 
<head> 
<title>Adding a Flash Video</title> 
<script type-"text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/ 
swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {}; 
var params = {movie:"../video/puppy.flv"}; 
swfobject.embedSWF("flash/splayer.swf", 
"show", "400", "320", "8.0.0", 
flashvars, params) ;</script> 
</head> 
<body> 
«div id="snow"><p>A video of a puppy playing in 
the snow</p></div> 
</body> 
</html> 


chapter-09/adding-a-flash-video.html 


This example uses the OS FLV 
player to display a video called 
puppy.f1v, which has already 
been convered into FLV format. 


You have already seen how to 
use SWFObject to embed a 
basic animation in a page, but 
sometimes Flash movies need 
information in order for them 

to work. In this example, the 
video player needs to know the 
path to the video it has to play, 
so SWFObject uses JavaScript 
variables to pass this information 
to the Flash movie. These are 
provided in the two lines of code 
that start with var 


This particular player is not 
expecting any information in the 
flashvars variable, so that is 
left empty. 


The path to the movie is supplied 
in the variable called params. 


var params = (movie: 
",./videos/puppy.flv"}; 


The line after the variables is 
the one that tells the script to 
replace the HTML element 

with the video player. It is very 
similar to the one you saw in the 
earlier example that introduced 
SWFObject. 


Different video players usually require information such as the path to the video in slightly different formats, but 
they usually come with examples and documentation to help you understand how to use them. 
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HIML5: PREPARING VIDEO 
FOR YOUR PAGES 


Despite the HTML5 <video> element being a 
very recent addition, it is enjoying widespread 
use. Here are some of the key issues to be 


aware of: 


SUPPORT 


The new HTML5 <video> 
element is only supported by 
recent browsers, so you cannot 
just use this one technique if you 
want everyone to be able to see 
your video (you need to combine 
this HTML5 with Flash Video). 


DIGITAL RIGHTS 


At the time of writing, the 
<video> element does not 
support any type of Digital 
Rights Management (DRM — 
sometimes referred to as copy 
protection). But a dedicated 
pirate will usually find a way 
around DRM. 


On page 222 you will see how 
to combine this HTML5 video 
technique with Flash Video to 
achieve wider reach. 
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FORMATS 


Not all browsers support the 
same video formats. Therefore, 
you need to supply your video in 
more than one format. 


To reach as many browsers as 
possible, you should provide the 
video in the following formats: 


H264: IE and Safari 
WebM: Android, Chrome, 
Firefox, Opera 


Chrome, Firefox, and Opera have 
indicated that they will support 

a format called WebM. (Some 
Flash players also support H264, 
and WebM - which will save on 
the number of conversions). 


| have provided a sample video in 
H264 and WebM format for you 
to try with the code downloads. 


CONTROLS 


The browser supplies its own 
controls for the player, and 
these can vary from browser 

to browser. You can control the 
appearance of these controls 
using JavaScript (but that is 
beyond the scope of this book). 


IN THE BROWSER 


One of the problems with players 
such as the Flash Player is that 
they can behave inconsistently 
when elements such as menus 
drop over them, or the window is 
scaled up or down. The HTML5 
option solves these issues. 


If you look at this example in 
Firefox and Opera you will see 
different controls when you 
hover over the video. 


HIML5: ADDING VIDEO 
TO YOUR PAGES 


<!DOCTYPE html» 
«html» 
<head> 


chapter-09/adding-html5-video.html 


<title>Adding HTML5 Video</title> 


</head> 
<body> 


«video src="video/puppy.mp4" 
poster="images/puppy.jpg” 
width="400" height="300" 


preload 
controls 
loop> 


<p>A video of a puppy playing in the snow</p> 


</video> 
</body> 
</html> 


In HTML5 you do not need to 
supply values for all attributes, 
such as the controls, autoplay, 
and loop attributes used 

with the «video» element. 
These attributes are like on/ 
off switches. If the attribute is 


present, it turns that option on. 


If the attribute is omitted, the 
option is turned off. 


If the browser does not 
support the «video» element 
or the format of video used, 

it will display whatever is 
between the opening «video» 
and closing </video> tags. 


preload 

This attribute tells the browser 
what to do when the page 
loads. It can have one of three 
values: 


none 
The browser should not load 
the video until the user presses 


play. 


auto 
The browser should download 
the video when the page loads. 


metadata 

The browser should just collect 
information such as the size, 
first frame, track list, and 
duration. 


«video» 


The «video» element has a 
number of attributes which allow. 
you to control video playback: 


SIRC 

This attribute specifies the path 
to the video. (The example video 
is in H264 format so it will only 
work in IE and Safari.) 


poster 

This attribute allows you to 
specify an image to show while 
the video is downloading or until 
the user tells the video to play. 


width, height 


These attributes specify the size 
of the player in pixels. 


controls 

When used, this attribute 
indicates that the browser 
should supply its own controls 
for playback. 


autoplay 

When used, this attribute 
specifies that the file should play 
automatically. 


loop 

When used, this attribute 
indicates that the video should 
start playing again once it has 
ended. 
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HIML5: MULTIPLE VIDEO 


SOURCES 


«source» 


To specify the location of the file 
to be played, you can use the 
«source»? element inside the 
«video» element. (This should 
replace the src attribute on the 
opening «video» tag.) 


You can also use multiple 
«source»? elements to specify 
that the video is available in 
different formats. 


(Due to a bug on the iPad, you 
should provide the MP4 video 
as the first format. Otherwise, it 
might not play.) 


Src 
This attribute specifies the path 
to the video. 


type 

You should use this attribute 
to tell the browser what format 
the video is. Otherwise, it will 
download some of the video to 
see if it can play the file (which 
will take time and bandwidth). 


codecs 

The codec that was used to 
encode the video is supplied 
within the type attribute. Note 
the use of single quotes, as well 
as double quotes in the type 
attribute, when it is supplied. 
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chapter-09/multiple-video-sources.html 


<!DOCTYPE html» 
«html» 
<head> 


<title>Multiple Video Sources</title> 


</head> 
<body> 


«video poster-"images/puppy.jpg" width-"400" 
height="320" preload controls loop» 

«source src-"video/puppy.mp4" type-'video/ 
mp4;codecs-"avcl.42bE01E, mp4a.40.2"' /> 
«source src-"video/puppy.webm" type-'video/ 

webm;codecs-"vp8, vorbis"' /> 
<p>A video of a puppy playing in the snow</p> 


</video> 
</body> 
</html> 


If the browser does not support 
the <video> element or the 
format of video used, it will 
display whatever is between the 
opening <video> and closing 
</video> tags. 


ONLINE EXTRA 

We have provided links to tools 
that help you encode videos and 
audio into the correct formats in 
the Tools section of the website. 


HIML5: COMBINING FLASH 


You may choose to offer HTML5 
as the first option, and Flash 
video as a fallback for people 
whose browser does not support 
HTMLS5 video. Or you may work 
the other way around. 


& HIML5 VIDEO 


By offering your videos in both HTML5 and 
Flash Video formats, you will ensure that it can 
be viewed by the majority of users on your site. 


Because some of the video If you start to work with HTML5 
players built in Flash support video in depth, you can also: 
H264 encoding, if you use a 


9 Creat layback 
player that supports this format ee RON PM 


controls 
you would only need to provide 
the video in H264 and WebM 9 Provide different versions 
formats. (You would not need of the video for browsers 
it in FLV format as well.) You that have different sized 


screens (so you can provide 
lower resolution content for 
handheld devices) 


will see this demonstrated in 
the example at the end of the 
chapter. 
* Tell different parts of a page 
to change when the video 
reaches a certain point 
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PAVE 


ADDING AUDIO TO 


WEB PAGES 


By far the most popular format for putting 
audio on web pages is MP3. As with video, 
there are three routes commonly taken: 


USE A HOSTED SERVICE 


There are several sites that allow 
you to upload your audio, and 
provide a player which you can 
embed in your page, such as 
SoundCloud.com and 
MySpace.com. 


Some people ask how to get 
music to play consistently even 
when visitors move from one 
page to another on a website. 


FLASH, VIDEO & AUDIO 


USE FLASH 


There are several Flash movies 
that allow you to play MP3 files; 
from simple buttons that play 
one track to complex players 
that allow you to create playlists 
and juke boxes. 


This is actually quite difficult 

to achieve and would rely on 
techniques like using AJAX to 
load page content or developing 
the entire site in Flash. 


USE HTML5 


HTMLS5 has introduced a new 
<audio> element. Browsers that 
support this element provide 
their own controls — much as 
they do for the video files we just 
looked at. 


This is why some sites offer 
audio players in new windows, 
so that listeners are not 
interrupted when they move 
between pages. 


ADDING A FLASH 
MP3 PLAYER 


HTML chapter-09/adding-a-flash-mp3-player.html 
<!DOCTYPE html» 
<html> 
<head> 


<title>Adding a Flash MP3 Player</title> 
<script type-"text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/ 
swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {}; 
var params = (mp3: "audio/test-audio.mp3"] ; 
swfobject.embedSWF( 
"flash/player mp3 1.0.0.swf", 
"mnuslc-player", "200", "290", "820.0", 
flashvars, params) ;</script> 
</head> 
<body> 
«div id="music-player"> 
<p>You cannot hear this track because this 
browser does not support our Flash music 
player.</p> 
</div> 
</body> 
</html> 


There are many MP3 players 
that have already been written in 
Flash, such as: 


flash-mp3-player.net 
musicplayer.sourceforge.net 
www.wimpyplayer.com 


Each of these players has 
different functionality, so check 
their features before choosing 
one for your site. 


This example uses a free player 
from flash-mp3-player.net 
which is embedded in the page 
using the SWFObject technique 
we met on pages 208-208. The 
player is told the path to the MP3 
file using a parameter called mp3. 


After the second <script> tag 
you can see that we have created 
two JavaScript variables; the first 
called flashvars, the second 
called params. Even though we 
are not using the flashvars 
variable, the SWFObject script 
expects it before the params 
variable so we need it there. 


var flashvars = {}; 
var params = { 
mp3: "music/noise.mp3"); 


These variables are then added 
at the end of the line that 
embeds the MP3 player in the 
page (just before the second 
closing «script? tag). 
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HIML5: ADDING HTML5 
AUDIO TO YOUR PAGES 


<audio> 


HTMLS5 introduced the «audio» 
element to include audio files 

in your pages. As with HTML5 
video, browsers expect different 
formats for the audio. 


The <audio> element has a 
number of attributes which allow 
you to control audio playback: 


SCC 
This attribute specifies the path 
to the audio file. 


controls 

This attribute indicates whether 
the player should display 
controls. If you do not use this 
attribute, no controls will be 
shown by default. You can also 
specify your own controls using 
JavaScript. 


autoplay 

The presence of this attribute 
indicates that the audio should 
start playing automatically. (It is 
considered better practice to let 
visitors choose to play audio.) 
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chapter-09/adding-html5-audio.html 


<!DOCTYPE html» 
«html» 
<head> 


<title>Adding HTML5 Audio</title> 


</head> 
<body> 


<audio src="audio/test-audio.ogg" 


controls autoplay> 


<p>This browser does not support our audio 


format.</p> 
</audio> 
</body> 
</html> 


0:04 


l| C — 9 0:6 > 


preload 

This attribute indicates what the 
browser should do if the player is 
not set to autoplay. It can have 

the same values we saw on page 
214 for the «video? element. 


loop 

This attribute specifies that the 
audio track should play again 
once it has finished. 


This example only works in 
browsers that support the Ogg 
Vorbis audio format (Firefox, 
Chrome, and Opera). For it to 
work in Safari 5 and IE 9, the 
audio would need to be in MP3 
format (or use the «source»? 
element covered on the next 
page to offer different formats). 


HIML5: MULTIPLE AUDIO 
SOURCES 


chapter-09/multiple-audio-sources.html < S O u I? C e > 


<!DOCTYPE html» 


<html> It is possible to specify more 
<head> than one audio file using the 
<title>Multiple Audio Sources</title> <source> element between the 
</head> opening <audio> and closing 
<body> </audio> tags (instead of the 
<audio controls autoplay> src attribute on the opening 
<source src="audio/test-audio.ogg" /> <audio> tag). 
<source src="audio/test-audio.mp3" /> 
<p>This browser does not support our audio This is important because 
format .</p> different browsers support 
</audio> different formats for audio files. 
</body> 
</html> MP3: Safari 5+, Chrome 6+, IE9 


Ogg Vorbis: Firefox 3.6, Chome 
6, Opera 1.5, IE9 


So you would need to supply two 
- audio formats to get coverage 
d) A ! * 4) across all recent browsers that 
support the <audio> element. 
You could also provide a Flash 
alternative for older browsers 
that do not support the <audio> 


element. 
src type 
The < >el t th At the ti f writing, the t 
e source clemen uses the | e time of writing, the type The ETML <audio> ee hes 
src attribute to indicate where attribute was not commonly i à 
RU Dn à not gained as widespread 
the audio file is located. being used on the «source»? 


adoption as the «video?» tag, 
and there have been some issues 
with audio quality in the first 
browsers to implement it. 


element in the same way it was 
for the «video» element. 
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EXAMPLE 


FLASH, VIDEO & AUDIO 


This example uses HTML5 to show a video. 


The video has been encoded in H264 and WebM formats to reach as 
many browsers as possible. A Flash player has been added to the page 
for browsers that do not support HTML5 video. The Flash player is 
embedded using SWFObject. If the browser does not support HTML5 
video or Flash, then a plain text message will be shown to the user. 


<!DOCTYPE html» 
«html» 
<head> 
<title>Flash, Video and Audio</title> 
<script type-"text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/ 
swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript"> 
var Tlashvars = (1: 
var params = {movie: "../video/puppy.flv"}; 
swfobject.embedSWF("flash/osplayer.swf", "snow", 
"ago", "320", "8.0.0", flashvars, params);«/script» 
</head> 
<body> 
«video poster-"images/puppy.jpg" width-"400" 
height-"320" controls="controls"> 
«source src-"video/puppy.mp4" type-'video/mp4; 
codecs="avcl.42E01E, mp4a.40.2"' /> 
<source src-"video/puppy.webm" type-'video/webm; 
codecs-"vp8, vorbis"' /> 
<div id="snow"> 
<p>You cannot see this video of a puppy playing 
in the snow because this browser does not 
support our video formats.</p> 
</div> 
</video> 
</body> 
</html> 
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SUMMARY 


FLASH, VIDEO & AUDIO 


Flash allows you to add animations, video and audio to 
the web. 


Flash is not supported on iPhone or iPad. 


HTMLS5 introduces new <video> and «audio» 
elements for adding video and audio to web pages, but 
these are only supported in the latest browsers. 


Browsers that support the HTML5 elements do not 

all support the same video and audio formats, so you 
need to supply your files in different formats to ensure 
that everyone can see/hear them. 
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In this section, we will look at how to 
make your web pages more attractive, 
controlling the design of them using CSS. 
CSS allows you to create rules that specify how the content of 
an element should appear. For example, you can specify that 
the background of the page is cream, all paragraphs should 


appear in gray using the Arial typeface, or that all level one 
headings should be in a blue, italic, Times typeface. 


Once you have learned how to write a CSS rule, learning CSS 
mostly involves learning the different properties you can use. 
So this chapter will: 


Introduce you to how CSS works 
Teach you how to write CSS rules 
' Show you how CSS rules apply to HTML pages 


The remaining chapters in this section will look at all of the 
various CSS properties you can use. 
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/ HARRIS 


le Edit View | History 


Introducing CSS. 


M O t SO + Sundli Q 
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A potager is a French term for an omamenta! vegetable or kitchen garden. Often flowers (edible and n ble) and herb 


the vegetables to enhance the garden's beauty. The goal is to make the function of providi asthotically plea 


Plants are chosen as much for their functionality as for their color and form. Many are trained to grow upward. A well-des 
provide food, cut flowers and herbs for the home with very little maintenance. Potagers c 


a wide à f forms - from the carefree style of the cottage garden to the formality of a knot garden 


are planted with 


ed potager can 


disguise their function of providing for a home in 
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UNDERSTANDING CSS: 
THINKING INSIDE THE BOX 


The key to understanding how CSS works is to 
imagine that there is an invisible box around 


every HTML element. 


Onthis page, you can see a basic 
HTML page. 


On the right hand page, you can 
see the same HTML page, but | 
have added outlines to each of 
the elements so that you can see 
how CSS will treat each element 
as if it lives inside its own box. 


The Cottage Garden 


The cottage garden is a distinct style of garden that uses an informal design, 
dense plantings, and a mixture of ornamental and edible plants. 


The Cottage Garden originated in England and its history can be traced back for 
centuries, although they were re-invented in 1870's England, when stylized 
versions were formed as a reaction to the more structured and rigorously 
maintained English estate gardens. 


The earliest cottage gardens were more practical than their modern descendants, 
with an emphasis on vegetables and herbs, along with some fruit trees. 


BLOCK & INLINE ELEMENTS 


You may remember from 
pages 185-186 that in there is a 
difference between block level 
and inline elements and how 
how browsers display them. 
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Block level elements look Inline elements flow within the 
like they start on a new line. text and do not start on a new 
Examples include the <h1>- line. Examples include <b>, <i>, 
<h6>, <p> and <div> elements. <img>, <em> and <span>. 


CSS allows you to create rules that control the 
way that each individual box (and the contents 
of that box) is presented. 


In this example, block level 
elements are shown with red 


The Cottage Garden borders, and inline elements 


have green borders. 


a [cotage garden | diri ue dl gendo ek PEF The <body> element creates the 
e | co arden |is a le of garden that uses an informal design, : 
ne " first box, then the <h1>, <h2>, 


<p>, <i>, and <a> elements each 
create their own boxes within it. 


dense plantings, and a mixture of ornamental and edible plants. 


The Cottage Garden originated in and its history can be traced back for 


centuries, although they were re-invented in 1870's England, when stylized Using CSS, you could add a 
border around any of the boxes, 


versions were formed as a reaction to the more structured and rigorously Ml . . 
specify its width and height, or 
add a background color. You 

could also control text inside 

The earliest cottage gardens were more practical than their modem descendants, a box — for example, its color, 

with an emphasis on vegetables and herbs, along with some fruit trees. size, and the typeface used. 


EXAMPLE STYLES 


BOXES TEXT SPECIFIC 

Width and height Typeface There are also specific ways 
Borders (color, width, and style) Size in which you can style certain 
Background color and images Color elements such as lists, tables, 
Position in the browser window. Italics, bold, uppercase, and forms. 


lowercase, small-caps 
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CSS ASSOCIATES STYLE 
RULES WITH HTML 
ELEMENTS 


CSS works by associating rules with HTML elements. These rules govern 
how the content of specified elements should be displayed. A CSS rule 
contains two parts: a selector and a declaration. 


SELECTOR 


ma 
DEI 
font family: Arial: } 


p Ee 


DECLARATION 


This rule indicates that all <p> Selectors indicate which Declarations indicate how 

elements should be shown in the element the rule applies to. the elements referred to in 

Arial typeface. The same rule can apply to the selector should be styled. 
more than one element if you Declarations are split into two 
separate the element names parts (a property and a value), 
with commas. and are separated by a colon. 
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CSS PROPERTIES AFFECT 
HOW ELEMENTS ARE 
DISPLAYED 


CSS declarations sit inside curly brackets and each is made up of two 
parts: a property and a value, separated by a colon. You can specify 
several properties in one declaration, each separated by a semi-colon. 


hl, h2, h3 { 
pontorgnmijsdw se An veel: 
color: yellow} 


cll Nl 


PROPERTY VALUE 
This rule indicates that all <h1>, Properties indicate the aspects Values specify the settings 
<h2> and <h3> elements of the element you want to you want to use for the chosen 
should be shown in the Arial change. For example, color, font, properties. For example, if you 
typeface, in a yellow color. width, height and border. want to specify a color property 


then the value is the color you 
want the text in these elements 
to be. 
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From Garden to Plate 


A potager is a French term for an ornamental vegetable or kitchen garden. Often flowers (edible and non-edible) and herbs are planted with 
the vegetables to enhance the garden's beauty. The goal is to make the function of providing food aesthetically pleasing. 


What to Plant 


Plants are chosen as much for their functionality as for their color and form. Many are trained to grow upward. A well-designed potager can 
provide food, cut flowers and herbs for the home with very little maintenance. Potagers can disguise their function of providing for a home in 
a wide array of forms - from the carefree style of the cottage garden to the formality of a knot garden. 
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J 4 Sunl219 Q l Here you can see a simple web page that is 
styled using CSS. 
This example uses two documents: the HTML file (example.html) 


and a separate CSS file (example.css). The fifth line of HTML uses the 
<link> element to indicate where the CSS file is located. 


SUMMARY 


On the next page, you will see how CSS rules can also be placed in your 
HTML pages and we will discuss when you might want to do this. 


<!DOCTYPE html» 
«html» 
<head> 
<title>Introducing CSS</title> 
<link href="css/example.css" type="text/css" 
rel="stylesheet" /> 
</head> 
<body> 
<hl>From Garden to Plate</h1> 
<p>A <i>potager</i> is a French term for an 
ornamental vegetable or kitchen garden ... </p> 
<h2>What to Plant</h2> 
<p>Plants are chosen as much for their functionality 


as for their color and form ... </p> 
</body> 
</html> 
body { 
font-family: Arial, Verdana, sans-serif; } 
hid hg 4 
color: #ee3e80; } 
p { 


color: #665544; } 
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USING EXTERNAL CSS 


«link» 


The «link» element can be used 
in an HTML document to tell the 
browser where to find the CSS 
file used to style the page. It is an 
empty element (meaning it does 
not need a closing tag), and it 
lives inside the «head? element. 
It should use three attributes: 


href 

This specifies the path to the 
CSS file (which is often placed in 
a folder called css or styles). 


type 

This attribute specifies the type 
of document being linked to. The 
value should be text/css. 


rel 

This specifies the relationship 
between the HTML page and 
the file it is linked to. The value 
should be stylesheet when 
linking to a CSS file. 


An HTML page can use more 
than one CSS style sheet. To 

do this it could have a «link? 
element for every CSS file it 
uses. For example, some authors 
use one CSS file to control the 
presentation (such as fonts and 
colors) and a second to control 
the layout. 
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<!DOCTYPE html» 
«html» 
<head> 
<title>Using External CSS</title> 
<link href="css/styles.css" type="text/css" 
rel="stylesheet" /> 
</head> 
<body> 
<h1l>Potatoes</h1> 
<p>There are dozens of different potato 
varieties. They are usually described as 
early, second early and maincrop.</p> 
</body> 
</html> 


chapter-10/styles.css CSS 


body { 
font-family: arial; 
background-color: rgb(185,179,175);} 
hl { 
colors pgb(255,255,255)s] 


RESULT 


Potatoes 


USING INTERNAL CSS 


[HTML Ed CSS. 


<!DOCTYPE html» 
«html» 
<head> 


chapter-10/using-internal-css.html 


<title>Using Internal CSS</title> 


<style type="text/css"> 


body { 


font-family: arial; 


background-color: 


hl { 


rgbCI85, 179, 17595) 


color: rgb(255,255,255);} 


</style> 

</head> 

<body> 
<h1>Potatoes</h1> 


<p>There are dozens of different potato 
varieties. They are usually described as 
early, second early and maincrop.</p> 


</body> 
</html> 


RESULT 


In HTML 4 and Transitional 
XHTML, you could also use 

a style attribute on most of 
the elements that appear in the 
body of a page. The CSS rules 


that appeared within the value 
of the attribute would only apply 
to that one element. You should 
avoid using this attribute in any 
new site but | mention it here 


<style> 


You can also include CSS rules 
within an HTML page by placing 
them inside a <style> element, 
which usually sits inside the 
<head> element of the page. 


The <style> element should use 
the type attribute to indicate 
that the styles are specified in 
CSS. The value should be text/ 
CSS. 


When building a site with more 
than one page, you should use 
an external CSS style sheet. This: 


* Allows all pages to use the 
same style rules (rather than 
repeating them in each page). 


* Keepsthe content separate 
from how the page looks. 


® Means you can change the 
styles used across all pages 
by altering just one file 
(rather than each individual 
page). 


because you may see it used in 
older code. Here is an example 
that changes the color of the text 
in a single paragraph red: 

<p style="color:red;"> 
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CSS SELECTORS 


There are many different types 


of CSS selector that allow you to chapter-10/css-selectors.html 
target rules to specific elements <!DOCTYPE html> 
in an HTML document. <html> 
<head> 
The table on the opposite page <title>CSS Selectors</title> 
introduces the most commonly </head> 
used CSS selectors. <body> 
«hl id="top">Kitchen Garden Calendar</hl> 
On this page, there is an HTML <p id="introduction">Here you can read our 
file to demonstrate which handy guide about what to do when.</p> 
elements these CSS selectors <h2>Spring</h2> 
would apply to. <ul> 
<li><a href-"mulch.html"»? 
CSS selectors are case sensitive, Spring mulch vegetable beds</a></1i> 
so they must match element <li><a href="potato.htm]"> 
names and attribute values Plant out early potatoes</a></1i> 
exactly. <li><a href="tomato.html"> 
Sow tomato seeds</a></1i> 
There are some more advanced <li><a href-"beet.html"» 
selectors which allow you Sow beet seeds</a></1i> 
to select elements based on <li><a href="Zucchini.html"> 
attributes and their values, Sow zucchini seeds</a></1i> 
which you will see on page 292. <li><a href="rhubarb.htm1"> 
Deadhead rhubarb flowers</a></1i> 
IE 7 was the first version of IE to </ul> 
support the last two selectors in <p class="note"> 
the table (the sibling selectors), This page was written by 
so their use is less common than <a href="mailto:ivy@example.org"™> 
the other selectors shown here. ivy@example.org</a> for 
<a href="http://www.example.org">Example</a>. 
</p> 
<p> 
<a href="#top">Top of page</a> 
</p> 
</body> 
</html> 
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SELECTOR 


UNIVERSAL SELECTOR 


CLASS SELECTOR 


CHILD SELECTOR 


DESCENDANT SELECTOR 


ADJACENT SIBLING 
SELECTOR 


GENERAL SIBLING 
SELECTOR 


MEANING 


Applies to all elements in the 
document 


Matches an element whose 

class attribute has a value that 
matches the one specified after 
the period Cor full stop) symbol 


Matches an element whose 

id attribute has a value that 
matches the one specified after 
the pound or hash symbol 


Matches an element that is a 
direct child of another 


Matches an element that is a 
descendent of another specified 
element (not just a direct child of 
that element) 


Matches an element that is the 
next sibling of another 


Matches an element that is a 
sibling of another, although it 
does not have to be the directly 
preceding element 


EXAMPLE 


* 1} 
Targets all elements on the page 


hls hes. AS-i 
Targets the <h1>, <h2> and <h3> 
elements 


.note {} 

Targets any element whose class 
attribute has a value of note 
p.note {} 

Targets only <p> elements 
whose class attribute has a 
value of note 


#Fintroduction {} 
Targets the element whose 
id attribute has a value of 
introduction 


lida () 

Targets any <a> elements that 

are children of an «1i» element 
(but not other <a> elements in 

the page) 


pa {} 

Targets any <a> elements that 
sit inside a <p> element, even if 
there are other elements nested 
between them 


hl+p {} 

Targets the first <p> element 
after any <h1> element (but not 
other <p> elements) 


hl-p {} 

If you had two <p> elements that 
are siblings of an <h1> element, 
this rule would apply to both 
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HOW CSS RULES CASCADE 


If there are two or more rules 
that apply to the same element, 
it is important to understand 
which will take precedence. 


LAST RULE 

If the two selectors are identical, 
the latter of the two will take 
precedence. Here you can see 
the second i selector takes 
precedence over the first. 


SPECIFICITY 

If one selector is more specific 
than the others, the more 
specific rule will take precedence 
over more general ones. In this 
example: 


h1 is more specific than * 
p bis more specific than p 
p#intro is more specific than p 


IMPORTANT 

You can add ! important after 
any property value to indicate 
that it should be considered 
more important than other rules 
that apply to the same element. 


Understanding how CSS rules 
cascade means you can write 
simpler style sheets because 
you can create generic rules 
that apply to most elements and 
then override the properties on 
individual elements that need to 
appear differently. 
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chapter-10/cascade.html 


HTML 


<hl>Potatoes</hl> 

<p id="intro">There are <i>dozens</i> of different 
<b>potato</b> varieties.</p> 

<p>They are usually described as early, 
and maincrop potatoes.</p> 


second early 


CSS 


*d 

font-family: Arial, Verdana, sans-serif; } 
hl { 

font-family: "Courier New", monospace; } 


EU 

color: green;) 
qx 

color: red;} 
bí 

color: pink;) 
pb { 

color: blue !important; } 
pb { 

color: violet; } 
p#intro { 

font-size: 100%; } 
p { 


font-size: 75%;} 


Potatoes 


There are dozens of different potato varieties. 


They are usually described as early, second early and maincrop potatoes, 


INHERITANCE 


HTML chapter-10/inheritance.html 
<div class="page"> 
<hl>Potatoes</hl> 


<p>There are dozens of different potato 
varieties.</p> 
<p>They are usually described as early, second 
early and maincrop potatoes.</p> 
</div> 


body { 
font-family: Arial, Verdana, sans-serif; 
color: #665544; 
padding: 10px;} 

.page f 
border: 1px solid #665544; 
background-color: #efefef; 
padding: inherit; } 


Potatoes 


There are dozens of different potato varieties. 


They are usually described as early, second early and maincrop 
potatoes. 


If you specify the font-family 
or color properties on the 
<body> element, they will apply 
to most child elements. This is 
because the value of the 
font-family property is 
inherited by child elements. It 
saves you from having to apply 
these properties to as many 
elements (and results in simpler 
style sheets). 


You can compare this with 

the background-color or 
border properties; they are not 
inherited by child elements. If 
these were inherited by all child 
elements then the page could 
look quite messy. 


You can force a lot of properties 
to inherit values from their 
parent elements by using 
inherit for the value of the 
properties. In this example, the 
<div> element with a class 
called page inherits the padding 
size from the CSS rule that 
applies to the <body> element. 
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WHY USE EXTERNAL 
STYLE SHEETS? 


When building a website there are several advantages to placing your 
CSS rules in a separate style sheet. 


All of your web pages can share 
the same style sheet. This is 
achieved by using the «link» 
element on each HTML page of 
your site to link to the same CSS 
document. This means that the 
same code does not need to be 
repeated in every page (which 
results in less code and smaller 
HTML pages). 


Therefore, once the user has 
downloaded the CSS stylesheet, 
the rest of the site will load 
faster. If you want to make a 
change to how your site appears, 
you only need to edit the one 
CSS file and all of your pages 

will be updated. For example, 
you can change the style of 
every <h1> element by altering 


the one CSS style sheet, rather 
than changing the CSS rules on 
every page. The HTML code 

will be easier to read and edit 
because it does not have lots of 
CSS rules in the same document. 
It is generally considered good 
practice to have the content of 
the site separated from the rules 
that determine how it appears. 


Sometimes you might consider placing CSS rules in the same page as 


your HTML code. 


If you are just creating a single 
page, you might decide to put 
the rules in the same file to 
keep everything in one place. 
(However, many authors would 
consider it better practice to 
keep the CSS in a separate file.) 
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If you have one page which 
requires a few extra rules (that 
are not used by the rest of the 
site), you might consider using 
CSS in the same page. (Again, 
most authors consider it better 
practice to keep all CSS rules in a 
separate file.) 


Most of the examples in this 
book place the CSS rules in the 
<head> of the document (using 
the «style» element) rather 
than a separate document. This 
is simply to save you opening 
two files to see how the CSS 
examples work. 


DIFFERENT VERSIONS OF 
CSS & BROWSER QUIRKS 


CSS! was released in 1996 and CSS2 followed two years later. Work on 
CSS3 has been ongoing but the major browsers have already started to 


implement it. 


In the same way that there have 
been several versions of HTML, 
there have also been different 
versions of CSS. 


Browsers did not implement all 
CSS features at once, so some 
older browsers do not support 
every property. 


This is mentioned when it is 
likely to affect you, along with 
notes where CSS properties 
might not behave as expected. 


Any seasoned user of CSS will tell you that some browsers display a few 
of the CSS properties in an unexpected way. But finding and squashing 
those bugs is easy when you know how... 


Before launching any new site, 

it is important to test it in more 
than one browser, because there 
can be slight differences in how 
browsers display the pages. 


You do not need lots of 
computers to test your site, as 
there are online tools to show 
you what a page looks like in 
multiple browsers: 


BrowserCam.com 
BrowserLab.Adobe.com 
BrowserShots.org 
CrossBrowserTesting.com 


Using these tools, it is a good 
idea to check the site on 
different operating systems (PC, 
Mac, and Linux) and in older 
versions of the major browsers, 
as well as recent versions. 


When you look at your site in 
more than one browser, you 
might find that some elements 
on your page do not look as you 
expect them to. 


When a CSS property does 
not display as expected, it 
is generally referred to as a 
browser quirk or CSS bug. 


Some common browser bugs are 
discussed in this book, but there 

are many smaller bugs that only 

occur in rare situations, or on old 
browsers that few people use. 


If you come across a CSS bug, 
you can use your favorite search 
engine to try and find a solution. 
Or you can check these sites: 


PositionIsEverything.net 
QuirksMode.org 
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SUMMARY 


INTRODUCING CSS 


CSS treats each HTML element as if it appears inside 
its own box and uses rules to indicate how that 
element should look. 


Rules are made up of selectors (that specify the 
elements the rule applies to) and declarations (that 
indicate what these elements should look like). 


Different types of selectors allow you to target your 
rules at different elements. 


Declarations are made up of two parts: the properties 
of the element that you want to change, and the values 
of those properties. For example, the font-family 
property sets the choice of font, and the value arial 
specifies Arial as the preferred typeface. 


CSS rules usually appear in a separate document, 
although they may appear within an HTML page. 


> How to specify colors 
> Color terminology and contrast 
> Background color 


Color can really bring your pages to life. 


In this chapter we will look at: 


How to specify colors, as there are three common ways in 
which you can indicate your choice of colors (plus extra 
ways made available in CSS3) 


Color terminology, as there are some terms that are very 
helpful to understand when it comes to picking colors 


Contrast, and ensuring that your text is readable 
Background colors for behind either your entire page or 


parts of a page 


What you will learn about colors in this chapter will then be 
used in subsequent chapters when it comes to looking at 
colors of text and boxes in CSS. 
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FOREGROUND COLOR 


color 


The color property allows you 


to specify the color of text inside chapter-11/foreground-color.html CSS 
an element. You can specify any /* color name */ 
color in CSS in one of three ways: hl { 
color: DarkCyan; } 
RGB VALUES /* hex code */ 
These express colors in terms h2 { 
of how much red, green and color: #ee3e80;} 
blue are used to make it up. For /* rgb value */ 
example: rgb(100,100,90) pt 


color: rgb(100,100,90);} 
RIE OBBES 
These are six-digit codes that 
represent the amount of red, 
green and blue in a color, 
preceded by a pound or hash # 
sign. For example: #ee3e80 
Marine Biology 
COLOR NAMES 
There are 147 predefined color 
names that are recognized 


The Composition of Seawater 


Almost anything can be found in seawater. This includes dissolved materials from 
Earth's crust as well as materials released from organisms. The most important 


by browsers. For example: components of seawater that influence life forms are salinity, temperature, 
dissolved gases (mostly oxygen and carbon dioxide), nutrients, and pH. These 
Dar kCya n elements vary in their composition as well as in their influence on marine life. 


We look at these three different 
ways of specifying colors on the 
next double-page spread. 


CSS3 has also introduced Above each CSS rule in this The use of comments can help 

another way to specify colors example you can see how CSS you to understand a CSS file 

called HSLA, which you will allows you to add comments (and organise it, by splitting a 

meet near the end of this chapter to your CSS files. Anything long document into sections). 

on page 255-256. between the /* symbols and Here, we have used comments 
the */ symbols will not be to indicate which method is used 
interpreted by the browser. to specify each of the different 
They are shown in grey above. types of colors. 
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BACKGROUND COLOR 


background-color 


body { 


background-color: 


hl { 


background-color: 


h2 { 


background-color: 


pt 


background-color: 


chapter-11/background-color.html 


rgb(200,200,200);] 


DarkCyan; } 


#ee3e80; } 


white; } 


Marine Biology 


The Composition of Seawater 


Almost anything can be found in seawater. This includes dissolved materials 
from Earth's crust as well as materials released from organisms. The most 
important components of seawater that influence life forms are salinity, 
temperature, dissolved gases (mosily oxygen and carbon dioxide), nutrients. 
and pH. These elements vary in their composition as well as in their influence 


on marine life. 


CSS treats each HTML element 
as if it appears in a box, and the 
background-color property 
sets the color of the background 
for that box. 


You can specify your choice of 
background color in the same 
three ways you can specify 
foreground colors: RGB values, 
hex codes, and color names 
(covered on the next page). 


If you do not specify a 
background color, then the 
background is transparent. 


By default, most browser 
windows have a white 
background, but browser users 
can set a background color for 
their windows, so if you want 

to be sure that the background 
is white you can use the 
background-color property on 
the <body> element. 


We have also used the padding 
property to separate the text 
from the edges of the boxes. 
This makes it easier to read and 
you will learn more about this 
property on page 313. 
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UNDERSTANDING COLOR 


Every color on a computer screen is created by mixing amounts of red, 
green, and blue. To find the color you want, you can use a color picker. 


Computer monitors are made 
up of thousands of tiny squares 
called pixels (if you look very 
closely at your monitor you 
should be able to see them). 


When the screen is not turned 
on, it's black because it's not 
emitting any light. When it's 
on, each pixel can be a different 
color, creating a picture. 


The color of every pixel on the 
screen is expressed in terms of 
a mix of red, green, and blue — 


just like on a television screen. 


Color picking tools are available 
Tet a in image editing programs like 
Photoshop and GIMP. You can 
see the RGB values specified 
next to the radio buttons that 


say R, G, B. 


Cancel 


The hex value is provided 
next to the pound or hash 

# symbol. There is also a 
good color picking tool at: 
colorschemedesigner.com 


tt: | ffcc00 
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RGB VALUES 


Values for red, green, and blue 
are expressed as numbers 
between O and 255. 


rgb(102,205,170) 


This color is made up of the 
following values: 

102 red 

205 green 

170 blue 


HUE 


Hue is near to the colloquial idea 
of color. Technically speaking 
however, a color can also have 
saturation and brightness as 
well as hue. 


HEX CODES 


Hex values represent values 
for red, green, and blue in 
hexadecimal code. 


#66cdaa 


The value of the red, 102, is 
expressed as 66 in hexadecimal 
code. The 205 of the green is 
expressed as cd and the 170 of 
the blue equates to aa. 


SATURATION 


Saturation refers to the amount 
of gray in a color. At maximum 
saturation, there would be no 
gray in the color. At minimum 
saturation, the color would be 
mostly gray. 


COLOR NAMES 


Colors are represented by 
predefined names. However, 
they are very limited in number. 


MediumAquaMarine 


There are 147 color names 
supported by browsers (this 
color is MediumAquaMarine). 
Most consider this to be a 
limited color palette, and it is 
hard to remember the name for 
each of the colors so (apart from 
white and black) they are not 
commonly used. 


BRIGHTNESS 


Brightness (or "value") refers 
to how much black is in a color. 
At maximum brightness, there 
would be no black in the color. 
At minimum brightness, the 
color would be very dark. 


coor @ 


CONTRAST 


When picking foreground and background 
colors, it is important to ensure that there is 
enough contrast for the text to be legible. 


Text is harder to read when 
there is low contrast between 
background and foreground 
colors. 


A lack of contrast is particularly 
a problem for those with 

visual impairments and color 
blindness. 


It also affects those with poor 
monitors and sunlight on their 
screens (which is increasingly 
common as people use handheld 
devices outdoors). 


HIGH 


CONTRAST 


Text is easier to read when 
there is higher contrast between 
background and foreground 
colors. 


If you want people to read a lot 
of text on your page, however, 
then too much contrast can 
make it harder to read, too. 


MEDIUM 
CONTRAST 


For long spans of text, reducing 
the contrast a little bit improves 
readability. 


You can reduce contrast by 
using dark gray text on a white 
background or an off-white text 
on a dark background. 


If text is reversed out (a light color on a dark background), you 


can increase the height between lines and the weight of the font 


to make it easier to read. 


To check contrast there is a handy online tool at: www. snook.ca/technical/colour_contrast/colour.html 
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CSS3: OPACITY 
opacity, rgba 


CSS chapter-11/opacity.html 


p.one { 
background-color: rgb(0,0,0); 
opacity: 0.5;) 

p.two { 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.5);} 


CSS3 introduces the opacity 
property which allows you to 
specify the opacity of an element 
and any of its child elements. 
The value is a number between 
0.0 and 1.0 (so a value of 0.5 

is 5096 opacity and 0.15 is 1596 
opacity). 


The CSS3 rgba property allows 
you to specify a color, just like 
you would with an RGB value, 
but adds a fourth value to 
indicate opacity. This value is 
known as an alpha value and is 
a number between 0.0 and 1.0 
(so a value of 0.5 is 50% opacity 
and 0.15 is 15% opacity). The 
rgba value will only affect the 
element on which it is applied 
(not child elements). 


Because some browsers will 

not recognize RGBA colors, you 
can offer a fallback so that they 
display a solid color. If there are 
two rules that apply to the same 
element, the latter of the two 
will take priority. To create the 
fallback, you can specify a color 
as a hex code, color name or 
RGB value, followed by the rule 
that specifies an RGBA value. If 
the browser understands RGBA 
colors it will use that rule. If it 
doesn't, it will use the RGB value. 


At the time of writing, the 
opacity and rgba properties 
are only supported by the most 
recent browsers. 
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C555: HSL COLORS 


CSS3 introduces an entirely new and intuitive 
way to specify colors using hue, saturation, 


and lightness values. 


HUE 


Hue is the colloquial idea of 
color. In HSL colors, hue is often 
represented as a color circle 
where the angle represents the 
color, although it may also be 
shown as a slider with values 
from O to 360. 


o COLOR 


SATURATION 


Saturation is the amount of 
gray in a color. Saturation is 
represented as a percentage. 
10096 is full saturation and O96 
is a shade of gray. 


LIGHTNESS 


Lightness is the amount of 
white (lightness) or black 
(darkness) in a color. Lightness 
is represented as a percentage. 
0% lightness is black, 100% 
lightness is white, and 50% 
lightness is normal. Lightness 
is sometimes referred to as 
luminosity. 


Please note that lightness is a 
different concept to brightness. 
Graphic design software (such 
as Photoshop and GIMP) have 
color pickers that use hue, 
saturation, and brightness — 
but brightness only adds black, 
whereas lightness offers both 
white and black. 


body ( 
background-color: 
background-color: 

p { 
background-color: 
background-color: 


#C8C8C8; 
hs1(0,0%,78%) ; } 


Hfffft: 
hs1a(0,1002,1002,0.5);) 


chapter-11/hsla.html 


The Composition of Seawater 


Marine Biology 


Almost anything can be found in seawater. This Includes dissolved materials 
from Earth's crust as well as materials released from organisms. The most 
important components of seawater that influence life forms are salinily, 
temperature, dissolved gases (mostly oxygen and carbon dioxide), nutrients, 
and pH. These elements vary in their composition as well as in their influence 


on marine life. 


Because older browsers do not 
recognize HSL and HSLA values, 
itis a good idea to add an extra 
rule which specifies the color 
using a hex code, RGB value, or 
color name. This should appear 
before the rule that uses the HSL 
or HSLA value. 


This provides a fallback because 
if there are two rules that apply 
to the same element in CSS, the 
latter of the two always takes 
priority. This means that if the 
browser understands HSL and 
HSLA colors, it will use that rule; 
and if it does not, it will use the 
first rule. 


C555: HSL & HSLA 


hsl, hsla 


The hs1 color property has 

been introduced in CSS3 as an 
alternative way to specify colors. 
The value of the property starts 
with the letters hs1, followed 

by individual values inside 
parentheses for: 


HUE 
This is expressed as an angle 
(between O and 360 degrees). 


SATURATION 
This is expressed as a 
percentage. 


LIGHTNESS 

This is expressed as a 
percentage with 0% being white, 
50% being normal, and 10096 
being black. 


The hsla color property allows 
you to specify color properties 
using hue, saturation, and 
lightness as above, and adds a 
fourth value which represents 
transparency (just like the rgba 
property). The a stands for: 


ALPHA 

This is expressed as a 

number between 0 and 1.0. 
For example, 0.5 represents 
5096 transparency, and 0.75 
represents 7596 transparency. 
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Ø Color - Mozilla Firefox 
Ge Edt Yew History Bookmarks Tools Help 


n= - a http: /wwnw.htmlandessbook.com/code/chapter-11 example. hm 


Color 


pH Scale 


TOMEURA O O OOOO 


0.0 VERY ACII 


JERY A cD 
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EXAMPLE 


COLOR 


This example shows a pH scale to demonstrate 
the different ways that colors can be specified 
using CSS (using color names, hex codes, RGB, 
and HSL). 


The rule for the «body» element sets a default color for all the text as 
well as the default background color for the page. Both use color names. 


The rule for the <h1> element sets the color of the heading using a hex 
code. There are two values for the background-color property of the 
<h1> element. The first provides a fallback color using a hex code and 
the second is an HSLA value for browsers that support this method. 


Each paragraph is then shown in a different color to represent the 
varying levels of acidity or alkalinity, and these are specified using RGB 
values. 


The example also uses a property called margin to decrease the gap 
between the paragraph boxes, and a property called padding to create 
a gap between the edge of the boxes and the text within them. (These 
properties are covered on pages 313-314.) 
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EXAMPLE 


COLOR 


<!DOCTYPE html»? 
«html» 
<head> 
<title>Color</title> 
<style type="text/css"> 
body { 
background-color: silver; 
color: white; 
padding: 20px; 
font-family: Arial, Verdana, sans-serif; } 
hl { 
background-color: #ffffff; 
background-color: hsla(0,100%,100%,0.5); 
color: #64645A; 
padding: inherit; } 
p { 
padding: 5px; 
margin: Opx;} 


p.zero { 

background-color: rgb(238,62,128);] 
p.one { 

background-color: rgb(244,90,139);} 
p.two { 

background-color: rgb(243,106,152);} 
p.three { 

background-color: rgb(244,123,166);} 
ps Four: { 

background-color: rgb(245,140,178);} 
p.five { 

background-color: rgb(246,159,192);} 
pasix f 

background-color: rgb(245,176,204) ;} 
p.seven { 

background-color: rgb(0,187,136);} 
p.eight ( 

background-color: rgb(140,202,242);] 
p.nine ( 


background-color: rgb(114,193,240);} 
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.ten f 

background-color: rgb(84,182,237);} 
eleven { 

background-color: rgb(48,170,233);) 
.twelve f 

background-color: rgb(0,160,230);) 
.thirteen f 

background-color: rgb(0,149,226);} 
.fourteen f 

background-color: rgb(0,136,221);} 


</style> 
</head> 
<body> 
<hl>pH Scale</hl> 


<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 


class="fourteen">14.0 VERY ALKALINE</p> 
class="thirteen">13.0</p> 
class="twelve">12.0</p> 
class="eleven">11.0</p> 
class="ten">10.0</p> 
class="nine">9.0</p> 
class="eight">8.0</p> 
class="seven">7.0 NEUTRAL</p> 
elass="six">6.0</p> 
class="five">5.0</p> 
class="four">4.0</p> 
class="three">3.0</p> 
class="two">2.0</p> 
class="one">1.0</p> 
class="zero">0.0 VERY ACID</p> 


</body> 


</html> 
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COLOR 


COLOR 260 


SUMMARY 


(COMES 


Color not only brings your site to life, but also helps 
convey the mood and evokes reactions. 


There are three ways to specify colors in CSS: 
RGB values, hex codes, and color names. 


Color pickers can help you find the color you want. 


It is important to ensure that there is enough contrast 
between any text and the background color (otherwise 
people will not be able to read your content). 


CSS3 has introduced an extra value for RGB colors to 
indicate opacity. It is known as RGBA. 


CSS3 also allows you to specify colors as HSL values, 
with an optional opacity value. It is known as HSLA. 


> Size and typeface of text 
> Bold, italics, capitals, underlines 
> Spacing between lines, words, and letters 


The properties that allow you to control 
the appearance of text can be split into 
two groups: 


^ Those that directly affect the font and its appearance 
(including the typeface, whether it is regular, bold or italic, 
and the size of the text) 


Those that would have the same effect on text no matter 
what font you were using (including the color of text and 
the spacing between words and letters) 


The formatting of your text can have a significant effect 
on how readable your pages are. As we look through these 
properties | will also give you some design tips on how to 
display your type. 
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Briards 


A HEART WRAPPED IN FUR 


Tha briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep. 


Breed History 

The briard, which is believed to have originated in France, has bean bred for centuries to herd and to protect sheep. The breed was 
used by the French Army as sentries, messengers and to search for wounded soldiers because of its fine sense of hearing. Briards 
were used in the First World War almost to the point of extinction. Currently the population of briards is slowly recovering 


Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards 


vy Duckett 
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TYPEFACE TERMINOLOGY 


SERIE 


Serif fonts have extra details on 
the ends of the main strokes of 
the letters. These details are 
known as serifs. 


In print, serif fonts were 
traditionally used for long 
passages of text because they 


were considered easier to read. 


o TEXT 


SANS-SERIF 


Sans-serif fonts have straight 
ends to letters, and therefore 
have a much cleaner design. 


Screens have a lower resolution 
than print. So, if the text is small, 
sans-serif fonts can be clearer 
to read. 


MONOSPACE 


Every letter in a monospace (or 
fixed-width) font is the same 
width. (Non-monospace fonts 
have different widths.) 


Monospace fonts are commonly 
used for code because they align 
nicely, making the text easier to 
follow. 


WEIGHT 


Light 
Medium 
Bold 
Black 


The font weight not only adds 
emphasis but can also affect 
the amount of white space and 
contrast on a page. 


ASCENDER above the cap height 


STYLE 


Normal 
Italic 
Oblique 


Italic fonts have a cursive aspect 
to some of the lettering. Oblique 
font styles take the normal style 
and put it on an angle. 


CAP HEIGHT top of flat letters 


X-HEIGHT height of the letter x 


BASELINE line the letters sit on 


DESCENDER below the baseline 


STRETCH 


Condensed 
Regular 
Extended 


In condensed (or narrow) 
versions of the font, letters are 
thinner and closer together. 

In expanded versions they are 
thicker and further apart. 


TEXT o 


CHOOSING A TYPEFACE 
FOR YOUR WEBSITE 


When choosing 

a typeface, it 

is important to 
understand that a 
browser will usually 
only display it if it's 
installed on that 
user's computer. 


o TEXT 


SERIF 


Serif fonts have extra details on 
the end of the main strokes of 
the letters. 

EXAMPLES: 

Georgia 

Times 


Times New Roman 


SANS-SERIF 
Sans-serif fonts have straight 


ends to letters and therefore 
have a much cleaner design. 


EXAMPLES: 
Arial 
Verdana 


Helvetica 


As a result, sites often use a small set of typefaces that are installed 
on most computers (shown above). There are some techniques to get 
around this limitation (which are covered on pages 271-272). 


It is possible to specify more than one typeface and create an order of 
preference (in case the user does not have your first choice of typeface 
installed). This is sometimes referred to as a font stack. 


MONOSPACE 


Every letter in a monospace 
typeface is the same width. 
(Non-monospace fonts have 
different widths.) 
EXAMPLES: 
Courier 


Courier New 


CURSIVE 


Cursive fonts either have 
joining strokes or other cursive 
characteristics, such as 
handwriting styles. 


EXAMPLES: 
Comic Sans MS 


Monotype Corsiva 


Browsers are supposed to support at least one typeface from each of 
the groups above. For this reason, it is common to add the generic font 
name after your preferred choice of typefaces. 


For example, if you wanted serif type, you could write the following: 
font-family: Georgia, Times, serif; 


FANTASY 


Fantasy fonts are usually 
decorative fonts and are often 
used for titles. They're not 
designed for long bodies of text. 


EXAMPLES: 


LOE aA 
Haettenschweiler 
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TECHNIQUES THAT OFFER 
A WIDER CHOICE OF 
TYPEFACES 


There are several ways to use fonts other than those listed on the 
previous page. However, typefaces are subject to copyright, so the 
techniques you can choose from are limited by their respective licenses. 


FONT-FAMILY 


The user's computer needs the 
typeface installed. CSS is used to 
specify the typeface. 


COVERED ON 
Pages 273-274 


ISSUES 


There is a limited choice of 
typefaces that most users have 
installed. 


LICENSING 
You are not distributing the 
typeface, so there is no licensing 
issue. 


CHOICE OF TYPEFACES 


There is a limited choice because 
the font needs to be installed on 
users' computers. 


FONT-FACE 


CSS specifies where a font can 
be downloaded from if it is not 
installed on the computer. 


Pages 277-278 


The user has to download the 
font file, which can slow down 
loading of the web page. 


The license to use the font must 
permit its distribution using 
@font-face. 


Choice is limited because 
few typefaces can be freely 
distributed this way. 


SERVICE-BASED 
FONT-FACE 


Commercial services give users 
access to a wider range of fonts 
using @font-face. 


Pages 277-278 


There is an ongoing fee to cover 
licenses paid to font foundries. 


The service takes care of the 
licensing issues with the people 
who made the font. 


Each service offers a different 
choice of fonts based on their 
agreements with font foundries. 


SUITABLE FOR ANY LENGTH OF TEXT 


TEXT 


If you design on a Mac, it is important to check what the typefaces look 
like on a PC because PCs can render type less smoothly. But if you design 
on a PC, then it should look fine on a Mac. 


IMAGES 


You can create a graphic that 
contains the text as you want it 
to appear in a different typeface. 


Pages 99-100 and 109-113 


People who use screen readers 
will rely on the a1t text to know 
what is said. 


You can use any typeface that 
you have a license to use on your 
computer (because you are not 
distributing the typeface). 


Very wide choice because you 
can use any typeface that you 
have a license for. 


SIFR 


The font is embedded into a 
Flash movie, and JavaScript 
replaces specified HTML text 
with a flash version of it. 


See website for more details 


This method only works if the 
user has Flash and JavaScript 
enabled on their device. 


Many commercial makers of 
typefaces allow this technique, 
although you may need to pay 
for an extra web-use license. 


This method provides a lot of 
choice because many of the 
major typeface manufacturers 
permit this kind of usage. 


CUFON 


Cufon offers similar functionality 
to sIFR. It uses JavaScript to 
create either an SVG or VML 
version of the text. 


COVERED ON 


See website for more details 


ISSUES 


Requires JavaScript to be 
enabled. Also, users cannot 
select text, and text can't change 
when a user hovers over it. 


LICENSING 


As with sIFR, some typeface 
makers allow use of their fonts 
with CUFON, but you need to 
check the license. 


GLIOISEIOEERZPBEAGES 


Slightly less choice than for sIFR, 
as some typeface manufacturers 
are not as keen on this 
technique. 


NOT SUITABLE FOR LONG PASSAGES OF TEXT 


TEXT P 


SPECIFYING TYPEFACES 
font-family 


e via chapter-12/font-family.html * 
typeface that should be used for <!DOCTYPE html» 
any text inside the element(s) to <html> 
which a CSS rule applies. <head> 
<title>Font Family</title> 
The value of this property is the <style type="text/css"> 
name of the typeface you want body { 
to use. font-family: Georgia, Times, serif; } 
hl, h2 4 

The people who are visiting font-family: Arial, Verdana, sans-serif;] 
your site need the typeface you .credits ( 
have specified installed on their font-family: "Courier New", Courier, 
computer in order for it to be monospace; } 
displayed. </style> 

</head> 
You can specify a list of fonts <body> 
separated by commas so that, <hl>Briards</h1> 
if the user does not have your <p class="credits">by Ivy Duckett</p> 
first choice of typeface installed, <p class="intro">The <a class-"breed" 
the browser can try to use an href="http://en.wikipedia.org/wiki/ 
alternative font from the list. Briard">briard</a>, or berger de brie, is 

a large breed of dog traditionally used as 

It is also common to end witha a herder and guardian of sheep...</p> 
generic font name for that type </body> 
of font (which you saw on pages </htm1> 
269-270). 


If a font name is made up of — 
more than one word, it should be oL aia 
put in double quotes. Briards 


by Ivy Duckett 


Designers suggest Page usually The briard, or berger de brie, is a large breed of dog traditionally used as a herder and 


look better if they use no more guardian of sheep. 
than three typefaces on a page. Breed History 
E The briard, which is believed to have originated in France, has been bred for centuries ta 
We will be using an extended herd and to protect sheep. The breed was used by the French Army as sentries, 
; messengers and to search for wounded soldiers because of its fine sense of hearing. 
version of the HTML shown on Briards were used in the First World War almost to the point of extinction. Currently the 
ihis page fap allen siye examples eee Charlemagne, Napoleon, ‘Thomas Jefferson 


in this chapter. 
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SIZE OF TYPE 


chapter-12/font-size.html 


body { 
font-family: Arial, Verdana, sans-serif; 
font-size: 12px;} 
hl { 
font-size: 200%; } 
h2 { 
font-size: 1.3em;} 


Briards 


by Ivy Duckett 


The briard, or berger de brie, is a large breed of dog traditionally used as a 
herder and guardian of sheep, 


Breed History 


The briard, which is believed to have originated in France, has been bred for 
centuries to herd and to protect sheep. The breed was used by the French Army 
as sentries, messengers and to search for wounded soldiers because of its fine 
sense of hearing. Briards were used in the First World War almost to the point of 
extinction. Currently the population of briards Is slowly recovering. Charlemagne, 
Napoleon, Thomas Jefferson and Lafayette all owned briards. 


font-size 


The font-size property enables 
you to specify a size for the 

font. There are several ways to 
specify the size of a font. The 
most common are: 


PIXELS 

Pixels are commonly used 
because they allow web 
designers very precise control 
over how much space their text 
takes up. The number of pixels is 
followed by the letters px. 


PERCENTAGES 

The default size of text in 
browsers is 16px. So a size of 
75% would be the equivalent of 
12px, and 200% would be 32px. 


If you create a rule to make all 
text inside the <body> element 
to be 75% of the default size (to 
make it 12px), and then specify 
another rule that indicates the 
content of an element inside the 
<body> element should be 75% 
size, it will be 9px (75% of the 
12px font size). 


EMS 
Anem is equivalent to the width 
of a letter m. 


We will look at these 


measurements in greater detail 
on the next page. 


TEXT 
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TYPE SCALES 


You may have noticed that programs such as 


Word, Photoshop and InDesign offer the same 


sizes of text. 


This is because they are set 
according to a scale or ratio that 
was developed by European 
typographers in the sixteenth 
century. 


It is considered that this scale 
for type is pleasing to the eye 
and it has therefore changed 
little in the last 400 years. 


For this reason, when you are 
designing pages, using sizes 
from this scale will help them 
look more attractive. 


On the next page, you can see 
how to achieve this scale using 
pixels, percentages, and ems. 


Print designers often refer to the 
size of text in terms of points 
rather than pixels (hence the 
use of pt in the scale on the 
right). A pixel roughly equates 
to a point because a point 
corresponds to 1/72 of an inch, 
and most computer displays 
have a resolution of 72 dots per 
inch. 


(275) TEXT 


The default size of text in a 
browser is 16 pixels. So if you 
use percentages or ems, you 
calculate the size of text you 
want based on the default size 
of the text used in browsers. 
For example, you could scale 
down to 12 pixels for body copy 
and scale up to 24 pixels for 
headings. 


Recently, some web designers 
have started to leave the body 
text at the default size of 16 
pixels and adjust the other font 
sizes using a scale that keeps 
the relative proportions of this 
one. 


When you first see body text at 
16 pixels, it might seem quite 
large. Once you get used to 

the larger type, however, most 
people find it far easier to read; 
and going back to a page where 
main type is 12 pixels will often 
then look quite small. 


8s 
95 
10» 
Tlp: 


12» 
14 


18» 
24» 


56» 
48» 


60» 
72» 


UNITS OF TYPE SIZE 


PIXELS 


TWELVE PIXEL SCALE 


hl 24px 
h2 18px 
h3 14px 
body 12px 


SIXTEEN PIXEL SCALE 


hl 32px 
h2 24px 
h3 18px 
body 16px 


Setting font size in pixels is the 
best way to ensure that the type 
appears at the size you intended 
(because percentages and ems 
are more likely to vary if a user 
has changed the default size of 
text in their browser). 


Pixels are relative to the 
resolution of the screen, so the 
same type size will look larger 
when a screen has a resolution 
of 800x600 than it would when 
it is 1280x800. 


You can also use pt for point 
sizes instead of px for pixels, but 
you should only do this when 
creating style sheets for printer- 
friendly versions of pages. 


PERCENTAGES 
h1 200% 
h2 150% 
h3 117% 
body 75% 
h1 200% 
h2 150% 
h3 133% 


body 100% 


The default size of text in a 

web browser is 16 pixels. Using 
percentages of this amount, you 
can create a scale where the 
default text size is 12 pixels, and 
headings are sized in relation 

to this. 


It is possible for users to change 
the default size of text in their 
web browsers. If they have 
done this, the fonts will be 
displayed at the same scale that 
the designer intended, but at a 
larger size. 


EMS 
h1 1.5em 
h2 1.3em 
h3 1.17em 
body 100% 
p 0.75em 
h1 2em 
h2 1.5em 
h3 1.125em 
body 100% 
p lem 


Ems allow you to change the size 
of text relative to the size of the 
text in the parent element. Since 
the default size of text in web 
browsers is 16 pixels, you can 
use similar rules to those shown 
for percentages. 


Because users can change 

the default size of text in their 
browser, the fonts could all 
appear larger (or smaller) than 
the designer intended. 


The extra p rule above is to help 
Internet Explorer 6 and 7 display 
the fonts at the right size. 
Without this extra rule, IE6 and 
IE7 exaggerate the relative sizes 
of other text. 
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MORE FONT CHOICE 


@font-face 


@font-face allows you to use 

a font, even if it is not installed 
on the computer of the person 
browsing, by allowing you to 
specify a path to a copy of the 
font, which will be downloaded if 
it is not on the user's machine. 


Because this technique allows 

a version of the font to be 
downloaded to the user's 
computer, it is important that the 
license for the font permits it to 
be used in this way. 


You add the font to your style 
sheet using the @font-face 
rule, as shown on the right. 


font-family 

This specifies the name of the 
font. This name can then be used 
as a value of the font-family 
property in the rest of the style 
sheet (as shown in the rule for 
the <h1> and <h2> elements). 


Sire 

This specifies the path to the 
font. In order for this technique 
to work in all browsers, you will 
probably need to specify paths 
to a few different versions of the 
font, as shown on the next page. 


format 

This specifies the format that the 
font is supplied in. (It's discussed 
in detail on the next page.) 
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chapter-12/font-face.html 
Gfont-face ( 


CSS 


font-family: 'ChunkFiveRegular'; 
src: url('fonts/chunkfive.eot');) 


Itu he d 


font-family: ChunkFiveRegular, Georgia, serif;} 


Briards 


by Ivy Duckett 


The briund, or berger de brie, is a large breed of dog traditionally used ns a herder and 


guardian of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries ta 
herd and to protect sheep. The breed was used by the French Army as sentries, 
messengers and to search for wounded soldiers because of its fine sense of hearing. 
Briards were used in the First World War almost to the point of extinction. Currently the 
population of briards is slowly recovering. Charlemagne, Napoleon, Thomas Jefferson 


and Lafayette all owned briards. 


Many typeface makers do not 
allow you to use their fonts in 
this way, but there are open 
source fonts you can use freely. 
You can find lists of them at: 


www.fontsquirrel.com 
www.fontex.org 
www.openfontlibrary.org 


When looking at fonts on these 
sites, it is still important to check 
the font's license agreement 
because some fonts are only free 
for personal use (that is, not for 
use on commercial websites). 


There are some sites that give 
you access to use commercial 
fonts, because they negotiated 
permission to let their customers 
use these fonts for a fee: 


www.typekit.com 
www.kernest.com 
www.fontspring.com 


Google also provides open 
source fonts. Rather than adding 
the @font-face rule to your own 
style sheet, you link to a CSS file 
and font files on their servers: 
www.google.com/webfonts 


UNDERSTANDING 
FONT FORMATS 


Different browsers support 
different formats for fonts 

(in the same way that they 
support different audio and 
video formats), so you will need 
to supply the font in several 
variations to reach all browsers. 


@font-face { 
font-family: 'ChunkFiveRegular'; 


chapter-12/understanding-font-formats.html 


src: url('fonts/chunkfive.eot'); 

src: url('fonts/chunkfive.eot?#iefix' ) 
format('embedded-opentype'), 
url('fonts/chunkfive.woff') format('woff'), 
url('fonts/chunkfive.ttf') 
format('truetype'), 
url('fonts/chunkfive.svgi#ChunkFiveRegular’ ) 
format('svg');} 


If you do not have all of these 
formats for your font, you can 
upload the font to a website 
called FontSquirrel where they 
will convert it for you: 


BROWSER FORMAT www.fontsquirrel.com/ 
fontf i 
eot woff ttf / otf svg ont tace/generatorn 

Chrome (all) ® Font Squirrel also provides you 
BRIER EE E E E A E T ETA E EN a coda tonite 

h + 
C. MERERI ERIS e ERE e RE e ees @font-face rule. This is very 
Firefox 3.5 e helpful because, when you 
erento are dealing with multipletont 
Firefox 3.6+ 
d URN THU TEASE TIRES e ESTEE e ee formats, the src and format 
ES = e properties of the @font-face 
es "—ÀÀà x —À 2 — MÀ : —— À fle caniget rather complicated: 
Opera 10+ e Q You can see an example of a 
Du un TRU ED OA D dU CER EO EUR S E Pecans b 4x more coraplisatedatont-face 
RIA E RE UM E eT rule on the left. 
iOS «4.2 © 
EN RINT TRENT eee Bo oe RE ER RE TAIN s NERA 5 T TREN ST SUE E T EE 


appear in your code in this order: 


Because the browser needs to 


minimize this behavior are to 


download the font file in order delete any unneccesary glyphs ! eot 

to show it, users might see from the font and/or host the 2: wot f 
something known as a Flash of font on a Content Delivery ' 

Unstyled Content (FOUC) or Network (a special type of web 3: ttf/otf 
Flash of Unstyled Text (FOUT). hosting that offers faster delivery 4: SVQ 


Two things you can do to try to 


of files). 
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BOLD 
font-weight 


The font-weight property 


allows you to create bold text. chapter-12/font-weight.html CSS 
There are two values that this .credits { 
property commonly takes: font-weight: bold;} 


normal 


This causes text to appear at a 
normal weight. 


Briards 
y Ivy Duckett 
bold by 1y Da 
: The briard, or berger de brie. is a large breed of dog traditionally used as a herder and 
This causes text to appear bold. puncte of shone 
In this example, you can see Breed History 
that the element whose class The briard, which is believed to have originated in France, has been bred for centuries to herd 


attribute has a value of credits coe mpc fo ey opts fe be emer a 

has been bolded. First World War almost to the point of extinction. Currently the population of briards is 
slowly recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned 

You might wonder why there is 

anormal weight. This is because 

if, for example, you created a 

rule for the <body> element 

indicating that all text inside the 

body should appear bold, you 

might need an option that allows 

the text in certain instances 

to appear normal weight. So 

it is essentially used as an "off 

switch." 
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CSS 


.credits ( 
font-style: italic;} 


JLT | 
Briards 


by Ivy Ducket 


chapter-12/font-style.html 


The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 


of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction. Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


ITALIC 
font-style 


If you want to create italic text, 
you can use the font-style 
property. There are three values 
this property can take: 


normal 

This causes text to appear in a 
normal style (as opposed to italic 
or oblique). 


italic 


This causes text to appear italic. 


oblique 
This causes text to appear 
oblique. 


In this example, you can see that 
the credits have been italicized. 


Italic fonts were traditionally 
stylized versions of the font 
based on calligraphy, whereas an 
oblique version would take the 
normal version and put it on an 
angle. 


It is not unusual for the browser 
to fail to find an italic version of a 
typeface, in which case it will use 
an algorithm to place the normal 
version of the type on a slant, 
which means that a lot of italic 
text online is actually oblique. 


TEXT 
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UPPERCASE & 
LOWERCASE 


text-transform 


The text-transform property 


is used to change the case of chapter-12/text-transform.html CSS 
text giving it one of the following hl { 
values: text-transform: uppercase; } 
h2 { 

text-transform: lowercase; 

uppercase i 
.credits { 

This causes the text to appear : : 

text-transform: capitalize; } 
uppercase. 
lowercase 
This causes the text to appear 
lowercase. BRIARDS 

E e By Ivy Duckett 

C a p 1 t a ] IZ e The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 
This causes the first letter of of-sheep. 
each word to appear capitalized. breed history 


labi h hl The briard, which is believed to have originated in France, has been bred for centuries to herd 
n this example, the <h1> and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
lement is rcase, the «h2» search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
RE ; uppercase mE World War almost to the point of extinction. Currently the population of briards is slowly 
element is lowercase, and the recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


credits are capitalized. In the 
HTML, the word by in the credits 
had a lowercase b. 


If you do utilize the uppercase 
option, it is worth looking at 
the letter-spacing property 
to increase the gap between 
each letter as shown on page 
284. This will help improve 
readability. 
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UNDERLINE & STRIKE 


text-decoration 


The text-decoration property 


CSS chapter-12/text-decoration.html 
allows you to specify the 
.credits { following values: 
text-decoration: underline; } 
none 


text-decoration: none; } 2 : 
This removes any decoration 


already applied to the text. 


underline 
This adds a line underneath the 
text. 
Briards 
by Ivy Duckett overline 
The briard, or berger de brie, is à large breed of dog traditionally used as a herder and guardian This adds a line over the top of 
of sheep. the text. 
Breed History 
The briard, which is believed to have originated in France, has been bred for centuries to herd ] 1 n (S 3 t h r (0) u g h 


and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction. Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


This adds a line through words. 


blink 


This animates the text to make it 
flash on and off (however this is 
generally frowned upon, as it is 
considered rather annoying). 


In this example, the credits have 
been underlined. Also, the name 
of the breed (which is a link) is 
not underlined, which it would 
be by default because it is a link. 


This property is commonly 

used by designers to remove 

the underlines that browsers 
place under links. Pages 290-291 
show how to add or remove an 
underline when a user hovers 
over a link. 
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LEADING 
line-height 


Leading (pronounced ledding) is 
a term typographers use for the 
vertical space between lines of 
text. In a typeface, the part of 

a letter that drops beneath the 
baseline is called a descender, 
while the highest point of a letter 
is called the ascender. Leading 
is measured from the bottom of 
the descender on one line to the 
top of the ascender on the next. 


hey there 


leading i 
font-size h line-height 


In CSS, the line-height 
property sets the height of 

an entire line of text, so the 
difference between the font- 
size andthe line-height is 
equivalent to the leading (as 
shown in the diagram above). 


Increasing the line-height 
makes the vertical gap between 
lines of text larger. 


Increasing the default amount of 
leading can make text easier to 
read. The vertical space between 
lines should be larger than the 
space between each word as this 
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chapter-12/line-height.html CSS 


pt 
line-height: 1.4em;} 


Briards 


by Ivy Duckett 


The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 
of sheep, 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep, The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction. Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards, 


Briards 


by Ivy Duckett 
The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 
of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction, Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


browser, the value of the line- 
height property is best given in 
ems, not pixels, so that the gap 
between lines is relative to the 


helps the eye move along the line 
instead of down them. A good 
starter setting is around 1.4 to 
1.5em. Because users can adjust 


the default size of text in their size of text the user has selected. 


LETTER & WORD SPACING 


letter-spacing, word-spacing 


hl, h2 ( 
text-transform: uppercase; 
letter-spacing: 0.2em;] 
.credits { 
font-weight: bold; 
word-spacing: 1lem;] 


BRIARDS 


by Ivy Duckett 


The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 
of sheep. 


BREED HISTORY 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction. Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


Briards 


by Ivy Duckett 


The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian 
of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction, Currently the population of briards is slowly 
recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


chapter-12/letter-and-word-spacing.html 


Kerning is the term 
typographers use for the space 
between each letter. You can 
control the space between each 
letter with the letter-spacing 
property. 


It is particularly helpful to 
increase the kerning when 
your heading or sentence is 
all in uppercase. If your text is 
in sentence (or normal) case, 
increasing or decreasing the 
kerning can make it harder to 
read. 


You can also control the gap 
between words using the 
word-spacing property. 


When you specify a value for 
these properties, it should 

be given in ems, and it will be 
added on top of the default value 
specified by the font. 


The default gap between 

words is set by the typeface 
(often around 0.25em), and 

it is unlikely that you would 

need to change this property 
regularly. If the typeface is bold 
or you have increased the space 
between letters, then a larger 
gap between words can increase 
readability. 
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ALIGNMENT 


text-align 


The text-align property allows 


you to control the alignment of chapter-12/text-align.html CSS 
text. The property can take one hl { 
of four values: text-align: left;} 
pt 
text-align: justify;} 
left 
.credits ( 


This indicates that the text 


text-align: right; 
should be left-aligned. EANTA TUNES 


right 
This indicates that the text Briards 
should be right-aligned. 


by Ivy Duckett 
The briand, or berger de brie, is a large breed of dog traditionally used as à herder and guardian 
ceniver PM 
This allows you to center text. Breed Histo: 
y 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and ta 


J u S 16 ] fy search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
ae ee . . World War almost to the point of extinction. Currently the population of briards is slowly 
This indicates that every line in recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


a paragraph, except the last line, 
should be set to take up the full 
width of the containing box. 


When you have several 
paragraphs of text, it is 
considered easiest to read if the 
text is left-aligned. 


Justified text looks at the words 
on each individual line and 
creates an equal gap between 
those words. It can look odd 

if you end up with large gaps 
between some words and 
smaller gaps between others. 
This often happens when your 
lines are not very wide or when 
your text contains long words. 
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VERTICAL ALIGNMENT 


vertical-align 


chapter-12/vertical-align.html 


d#tsix-months { 

vertical-align: text-top;} 
#one-year { 

vertical-align: baseline; } 
#two-years { 

vertical-align: text-bottom; } 


Briard Life Stages 


P Six months 
I One year 
n Two years 


The vertical-align property is 
a common source of confusion. 
It is not intended to allow you to 
vertically align text in the middle 
of block level elements such as 
<p> and <div>, although it does 
have this effect when used with 
table cells (the «td» and «th» 
elements). 


It is more commonly used with 
inline elements such as «img», 
<em>, or <strong> elements. 
When used with these elements, 
it performs a task very similar to 
the HTML align attribute used 
on the «img? element, which 
you met on pages 103-106. The 
values it can take are: 


baseline 
sub 

super 

top 
text-top 
middle 
bottom 
text-bottom 


It can also take a length (usually 


specified in pixels or ems) or a 
percentage of the line height. 
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INDENTING TEXT 


text-indent 


The text-indent property 


allows you to indent the first chapter-12/text-indent.html CSS 
line of text within an element. hl { 

The amount you want the line background-image: url("images/logo.gif"); 

indented by can be specified in background-repeat: no-repeat; 

a number of ways but is usually text-indent: -9999px;} 

given in pixels or ems. .credits { 


text-indent: 20px;} 
It can take a negative value, 
which means it can be used 
to push text off the browser 
window. You can see this 
technique used in this example, 
where the <h1> element uses a 
background image to represent 


the heading. The text has been by Ivy Duckett 

moved far to the left, off the The briard, or berger de brie, is a large breed of dog traditionally used as a herder and 
screen. (Background images are PORTAL Reet 

covered on pages 413-418.) Breed History 


" 4 The briard, which is believed to have originated in France, has been bred for centuries to herd 
We still want the heading text and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
wb th ( f h search for wounded soldiers because of its fine sense of hearing. Briards were used in the 
o be on the page (or Searc First World War almost to the point of extinction. Currently the population of briards is 
e ngi nes and those who cannot slowly recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned 


see the image), but we cannot 
have it displayed on top of the 
logo or it will be unreadable. By 
pushing it 9,999 pixels to the 
left, it is way out of sight but still 
in the HTML code. 


The second rule in this example 


indents the credits 20 pixels to 
the right. 
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C555: DROP SHADOW 


text-shadow 


The text-shadow property has 


CSS chapter-12/text-shadow.html b : 
ecome commonly used despite 
p.one { lacking support in all browsers. 
background-color: #eeeeee; 
color: #666666; It is used to create a drop 
text-shadow: 1px 1px Opx #000000; } shadow, which is a dark version 
p.two { of the word just behind it and 
background-color: #dddddd; slightly offset. It can also be used 
color: #666666; to create an embossed effect by 
text-shadow: 1px 1px 3px #666666; } adding a shadow that is slightly 
p.three { lighter than the text. 
background-color: #cccccc; 
color: #ffffff; The value of this property is 
text-shadow: 2px 2px 7px #111111;} quite complicated because it can 
p.four { take three lengths and a color for 
background-color: #bbbbbb; the drop shadow. 
colors ceecee; 
text-shadow: -1px -2px #666666; } The first length indicates how 
p.five { far to the left or right the shadow 
background-color: #aaaaaa; should fall. 
color: #ffffff; 
text-shadow: -1px -1px #666666; } The second value indicates the 


distance to the top or bottom 
that the shadow should fall. 


The third value is optional and 
specifies the amount of blur that 
The briard is known as a heart wrapped in fur. should be applied to the drop 
shadow. 
The briard is known as a heart wrapped in fur. 


The fourth value is the color of 


he priardnsiknownelsethear avripped pnt UTR nuce 


The text-shadow property 

has become very popular but 

at the time of writing it was 
The briard is known as a heart wrapped in fur. not supported in any versions 

of Internet Explorer (currently 
IE9). Other browser makers 
introduced it in Firefox 3.1, Safari 
3, Chrome 2 and Opera 9.5. 


The srrera T8 enis 
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FIRST LETTER OR LINE 


:first-letter, :first-line 


You can specify different values 
for the first letter or first line of 
text inside an element using 
:first-letter and 
:first-line. 


Technically these are not 
properties. They are known as 
pseudo-elements. 


You specify the pseudo-element 
at the end of the selector, and 
then specify the declarations as 
you would normally for any other 
element. 


It is worth trying this example in 
your browser so that you can see 
how the first-line pseudo- 
element will only affect the first 
line of text, even if you resize 
your browser window and less or 
more words appear on each line. 
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chapter-12/first-letter-and-line.html CSS 


p.intro:first-letter { 
font-size: 200%; } 

p. intro: first-line f 
font-weight: bold;} 


Briards 


by Ivy Duckett 


The briurd, or berger de brie, is a large breed of dog traditionally used us a herder and 


guardian of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd 
and to protect sheep. The breed was used by the French Army as sentries, messengers and to 
search for wounded soldiers because of its fine sense of hearing. Briards were used in the First 
World War almost to the point of extinction. Currently the population of briards is slowly 
recovering, Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards. 


CSS introduces both pseudo- 
elements and pseudo-classes. 
A pseudo-element acts like an 
extra element is in the code. In 
the case of the :first-letter 
and :first-line pseudo 
elements, it is as if there is an 
extra element around the first 
letter or the first line which can 
have its own styles applied. 


A pseudo-class acts like an 
extra value for a class attribute. 
In the case of the :visited 
pseudo-class, which you meet 
on the next page, it allows you 
to have different styles for links 
that have been visited. Similarly, 
the :hover pseudo-class allows 
you to style elements differently 
when a user hovers over them. 


CSS 


slink { 

color: deeppink; 
text-decoration: 
:visited { 


color: black;} 


:hover { 

color: deeppink; 
text-decoration: 
:active { 

color: darkcyan; 


none; } 


STYLING LINKS 


"Taco :visited 


chapter-12/link-visited.html 


underline; } 


Dog Breeds: B 


Basset Hound 


Beagle 


Bearded Collie 
Beauceron 
Bedlington Terrier 
Belgian Shepherd 
Bergamasco 
Bichon Frise 
Bloodhound 
Bolognese 


Border Collie 
T ler Terrier 


Borzoi 


Bouvier des Flandres 


Briard 


Bull Terrier 


Bulldog 


Browsers tend to show links 

in blue with an underline by 
default, and they will change 
the color of links that have been 
visited to help users know which 
pages they have been to. 


In CSS, there are two pseudo- 
classes that allow you to set 
different styles for links that 
have and have not yet been 
visited. 


:link 
This allows you to set styles 


for links that have not yet been 
visited. 


:visited 
This allows you to set styles for 
links that have been clicked on. 


They are commonly used to 
control colors of the links and 
also whether they are to appear 
underlined or not. 


On the left, you can see that 
visited links are shown ina 
different color to help visitors 
know what they have already 
seen. 


Often, the :hover and :active 
pseudo-classes (covered on the 
next page) are used to alter the 
appearance of a link when a user 
hovers over or clicks on it. 
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RESPONDING IO USERS 


:hover, :active, :focus 


There are three pseudo-classes 
that allow you to change the 
appearance of elements when a 
user is interacting with them. 


:hover 
This is applied when a user 
hovers over an element with a 


pointing device such as a mouse. 


This has commonly been used 
to change the appearance of 
links and buttons when a user 
places their cursor over them. It 
is worth noting that such events 
do not work on devices that use 
touch screens (such as the iPad) 
because the screen is not able to 
tell when someone is hovering 
their finger over an element. 


:active 

This is applied when an element 
is being activated by a user; for 
example, when a button is being 
pressed or a link being clicked. 
Sometimes this is used to make 
a button or link feel more like it 
is being pressed by changing the 
style or position of the element 
slightly. 


[FOCUS 

This is applied when an element 
has focus. Any element that 
you can interact with, such as a 
link you can click on or any form 
control can have focus. 


MEXT 


chapter-12/hover-active-focus.html css 


input { 


padding: 6px 12px 6px 12px; 


border: 1px solid #665544; 


color: #ffffff;} 
input.submit:hover { 


background-color: #665544; } 


input.submit:active { 


background-color: chocolate; } 


input.text { 
color: #cccccc;} 

input.text:focus { 
color: #665544; } 


[— Emm 


Focus occurs when a browser 
discovers that you are ready to 
interact with an element on the 
page. For example, when your 
cursor is in a form input ready 
to accept typing, that element 
is said to have focus. It is also 


possible to use the tab key on 
your keyboard to move through 
the interactive items on a page. 
When pseudo-classes are 

used, they should appear in this 
order: :link, :visited, :hover, 
:focus, :active. 


ATTRIBUTE SELECTORS 


You met the most popular CSS selectors on page 238. There are also 
a set of attribute selectors that allow you to create rules that apply to 
elements that have an attribute with a specific value. 


SELECTOR 


EXISTENCE 


MEANING 


[1 
Matches a specific attribute 
(whatever its value) 


EXAMPLE 


p[class] 
Targets any <p> element with an 
attribute called class 


Matches a specific attribute with 
a specific value 


p[class-"dog"] 

Targets any <p> element with 
an attribute called class whose 
value is dog 


Matches a specific attribute 
whose value appears in a space- 
separated list of words 


p[class--"dog"] 

Targets any <p> element with 
an attribute called class whose 
value is a list of space-separated 
words, one of which is dog 


ps] 

Matches a specific attribute 
whose value begins with a 
specific string 


p[attr^"q"] 

Targets any <p> element with 
an attribute whose value begins 
with the letter "d" 


SUFFIX 


Matches a specific attribute 
whose value contains a specific 
substring 


[$=] 

Matches a specific attribute 
whose value ends with a specific 
string 


pLattr*"do"] 

Targets any <p> element with an 
attribute whose value contains 
the letters "do" 


pLattr$"g"] 

Targets any <p> element with an 
attribute whose value ends with 
the letter "g" 
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@ Safari File Edit View History Bookmarks Develop Window Help 


Rn" Text 
4| | +. | @ http:/ /www.htmlandcssbook.com/code/chapter-12/example.html 


Briards 


A HEART WRAPPED IN FUR 


The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep. 


Breed History 


The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep. The breed was 
used by the French Amy as sentries, messengers and to search for wounded soldiers because of its fine sense of hearing. Briards 
were used in the First World War almost to the point of extinction. Currently the population of briards is slowly recovering 
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards 


by Ivy Duckett 


293 Bias 


EXAMPLE 


TEXT 


This example combines many of the techniques 
shown in this chapter. 


The sizes of fonts are controlled using the font-size property. The 
headings are changed from bold to normal using the font-weight 
property. We have also specified different choices of font using the 


font-family property. 

The <h1> element uses the CSS3 text-shadow property to create the 

drop shadow behind it. The <h2> element is converted to uppercase 

using the text-transform property, and to make the uppercase text 
easier to read, we have increased the space between each letter using 
the letter-spacing property. 

For the main body text, we have increased the line-height property so 
there is a bigger gap between each line of text, thereby making it easier 
to read. In the first paragraph, the first-line pseudo-element allows 
| us to style the first line of the introduction in bold. Finally, the credit is 

italicized and aligned to the right-hand side of the page. 

| 
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EXAMPLE 


TEXT 


<!DOCTYPE html»? 
<html> 
<head> 
<title>Text</title> 
<style type="text/css"> 

body { 
padding: 20px;} 

hi, h2, h3, & ( 
font-weight: normal; 
color: #0088dd; 
margin: Opx;} 

hl { 
font-family: Georgia, Times, serif; 
font-size: 2502; 
text-shadow: 2px 2px 3px #666666; 
padding-bottom: 10px;} 

h2 { 
font-family: "Gill Sans", Arial, sans-serif; 
font-size: 90%; 
text-transform: uppercase; 
letter-spacing: 0.2em; } 

h3 { 
font-size: 150%; } 

p { 
font-family: Arial, Verdana, sans-serif; 
line-height: 1.4em; 
color: #665544; } 

BintresTirst=line d 
font-weight: bold; } 

credits { 
font-style: italic: 
text-align: right; } 


a { 
text-decoration: none; } 
a:hover { 
text-decoration: underline; } 
</style> 
</head> 
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EXAMPLE 


TEXT 


<body> 
<hl>Briards</h1> 
<h2>A Heart wrapped in fur</h2> 
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wikiBriard"> 
briard</a>, or berger de brie, is a large breed of dog traditionally used as a 
herder and guardian of sheep.</p> 
<h3>Breed History</h3> 
<p>The briard, which is believed to have originated in France, has been bred for 
centuries to herd and to protect sheep. The breed was used by the French Army as 
sentries, messengers and to search for wounded soldiers because of its fine sense 
of hearing. Briards were used in the First World War almost to the point of 
extinction. Currently the population of briards is slowly recovering. 
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p> 
<p class="credits">by Ivy Duckett</p> 
</body> 
</html> 
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SUMMARY 


TEXT 


There are properties to control the choice of font, size, 
weight, style, and spacing. 


There is a limited choice of fonts that you can assume 
most people will have installed. 


If you want to use a wider range of typefaces there are 
several options, but you need to have the right license 
to use them. 


You can control the space between lines of text, 
individual letters, and words. Text can also be aligned 
to the left, right, center, or justified. It can also be 
indented. 


You can use pseudo-classes to change the style of an 
element when a user hovers over or clicks on text, or 
when they have visited a link. 


> Controlling size of boxes 
> Box model for borders, margin and padding 
> Displaying and hiding boxes 


At the beginning of this section on CSS, 
you saw how CSS treats each HTML 


element as if it lives in its own box. 

You can set several properties that affect the appearance of 
these boxes. In this chapter you will see how to: 

® Control the dimensions of your boxes 

® Create borders around boxes 

9 Set margins and padding for boxes 

* Show and hide boxes 


Once you have learned how to control the appearance of each 
box, you will see how to position these boxes on your pages in 
Chapter 15 when we look at page layout. 
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BOX DIMENSIONS 
width, height 


pyeta aonisszdMSDE cuopter-/dty-hetgit hem 
set your own dimensions for a <div> 
box you can use the height and <p>The Moog company pioneered the commercial 
width properties. manufacture of modular voltage-controlled 
analog synthesizer systems in the early 
The most popular ways to 1950s.</p> 
specify the size of a box are </div> 


to use pixels, percentages, or 
ems. Traditionally, pixels have 
been the most popular method 
because they allow designers to 
accurately control their size. 


When you use percentages, es 
the size of the box is relative to div. box 1 
the size of the browser window height: 300px; 
or, if the box is encased within width: 300px; 
another box, it is a percentage of background-color: #bbbbaa;} 
the size of the containing box. pt 
height: 75%; 
When you use ems, the size width: 75%; 
of the box is based on the size background-color: #0088dd; } 


of text within it. Designers 
have recently started to use 
percentages and ems more for 
measurements as they try to 


create designs that are flexible The Moog company pioneered the 
devi idal commercial manufacture of modular 
EOSS COVES MINIEN IMENS voltage-controlled analog synthesizer 


different-sized screens. systems in the early 1950s. 


In the example on the right, you 
can see that a containing «div» 
element is used which is 300 
pixels wide by 300 pixels high. 
Inside of this is a paragraph 

that is 7596 of the width and 
height of the containing element. 
This means that the size of the 
paragraph is 225 pixels wide by 
225 pixels high. 


303. BOXES 


LIMITING WIDTH 


min-width, max-width 


HTML chapter-13/min-width-max-width.html 


<tr? 


<td><img src="images/rhodes. jpg" width="200" 
height="100" alt="Fender Rhodes" /></td> 
<td class="description">The Rhodes piano is an 


electro-mechanical piano, invented by 
Rhodes during the fifties and later 
manufactured in a number of models 
<td>$1400</td> 
</tr> 


td.description { 
min-width: 450px; 
max-width: 650px; 
text-align: left; 
padding: 5px; 
margin: Opx;} 


Photo Descrption — 


Harold 


EP eds 


The Rhodes piano is an electro-mechanical piano, invented by $400 
Harold Rhodes during the fifties and later manufactured in a 

number of models, first in collaboration with Fender and after 
1965 by CBS. It employs a piano-like keyboard with hammers 

that hit small metal tines, amplified by electromagnetic pickups. 


The Wurlitzer electric piano is an electro-mechanical piano. $1600 
created by Ihe Rudolph Wurlitzer Company of Mississippi. The 
Wurlitzer company itself never called the instrument an "electric 
piano”, instead inventing the phrase "Electronic Piano” and 

using this as a trademark throughout the production of the 

instrument. It employs a piano-ike keyboard with hammers that 

hit small metal ines, amplified by electromagnetic pickups. 


A Clavinet is an electronically amplified clavichord $1200 
manufactured by the Hohner company. Each key uses a rubber 

ip to perform a hammer on a string. Its distincbve bright 

‘Staccato sound is oflen compared to that of an eleciric guitar 

Various models were produced over the years, inctoding the 

models J, Il. L. C. D6, and E7. 


Some page designs expand and 
shrink to fit the size of the user's 
screen. In such designs, the 
min-width property specifies 
the smallest size a box can be 
displayed at when the browser 
window is narrow, and the 
max-width property indicates 
the maximum width a box can 
stretch to when the browser 
window is wide. 


These are very helpful properties 
to ensure that the content of 
pages are legible (especially on 
the smaller screens of handheld 
devices). For example, you can 
use the max-width property to 
ensure that lines of text do not 
appear too wide within a big 
browser window and you can 
use the min-width property 

to make sure that they do not 
appear too narrow. 


You may find it helpful to try this 
example out in your browser so 
that you can see what happens 
when you increase or decrease 
the size of the browser window. 


Please note that these properties 
were first supported in IE7 and 

Firefox 2 so they will not work in 
older versions of these browsers. 


BOXES 
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LIMITING HEIGHT 
min-height, max-height 


REN LN DEDE chapter-13/min-height-max-height.html 
on a page, you may also want <h2>Fender Mustang</h2> 
to limit the height of it. This is <p>The Fender Mustang was introduced in 1964 as the 
achieved using the min-height basis of a major redesign of Fender's ...</p> 
and max-height properties. <h2>Fender Stratocaster</h2> 

<p>The Fender Stratocaster or "Strat" is one of the 
The example on this page ost popular electric guitars of all time ...</p> 
demonstrates these properties <h2>Gibson Les Paul</h2> 
in action. It also shows you what <p>The Gibson Les Paul is a solid body electric 
happens when the content of the guitar that was first sold in 1952 ...</p> 


box takes up more space than 
the size specified for the box. 


If the box is not big enough to CSS 
hold the content, and the content h2, p { 

expands outside the box it can width: 400px; 

look very messy. To control font-size: 90%; 

what happens when there is not line-height: 1.2em;} 

enough space for the content of h2 { 

a box, you can use the overflow color: #0088dd; 

property, which is discussed on border-bottom: 1px solid #0088dd;} 

the next page. pt 


min-height: 10px; 
max-height: 30px;} 


Fender Mustang 


The Fender Mustang was introduced in 1964 as the basis of a 

major redesign of Fender's student models then consisting of 

ps lusicmaster and Duo-Sonic. It was originally popular in 
id-attained cult status-in-the-1990s largely — 


FE E ERIS REP "retrato COIT ToS PROBIS 


electric guitars of all time, and its design has been copied by 


Bia tar makers. It was designed by Leo Fender, George 
at EMEN B in-1954 


The Gibson Les Paul is a solid body electric guitar that was 
first sold in 1952. The Les Paul was designed by Ted McCarty 
in collaboration with popular guitarist Les Paul, whom Gibson 
enlisted to endorse the new model. It is one of the most well- 
known electric guitar types in the world. 


305. BOXES 


OVERFLOWING CONTENT 


<h2>Fender 
<p class="0 


all time, 


guitar m 
<h2>Gibson 


<p class="two">The Gibson Les Paul 


electric 
The Les 


CSS 


p.one { 
overflow: 

p.two { 
overflow: 


chapter-13/overflow.html 


Stratocaster</h2> 


ne">The Fender Stratocaster or 
is one of 


Les Paul</h2> 


hidden; } 


Scroll: 


Fender 
Stratocaster 


The Fender Stratocaster or 
"Strat" is one of the most 
popular electric guitars of all 
time, and its design has been 
copied by many guitar makers. 


Gibson Les Paul _ 


The Gibson Les Paul is a 0 
solid body electric guitar that 

was first sold in 1952. The a 
Les Paul was designed by + 


"Strat" 
the most popular electric guitars of 
and its design has been copied by many 
akers. It was designed by Leo... 


</p> 


is a solid body 
guitar that was first sold in 1952. 
Paul was designed by Ted McCarty... </p> 


overflow 


The over flow property tells the 
browser what to do if the content 
contained within a box is larger 
than the box itself. It can have 
one of two values: 


hidden 


This property simply hides any 
extra content that does not fit in 
the box. 


scroll 

This property adds a scrollbar to 
the box so that users can scroll 
to see the missing content. 


On the left, you can see two 
boxes whose contents expand 
beyond their set dimensions. The 
first example has the overflow 
property with a value of hidden. 
The second example has the 
overflow property with a value 
of scroll. 


The overflow property is 
particularly handy because some 
browsers allow users to adjust 
the size of the text to appear as 
large or as small as they want. If 
the text is set too large then the 
page can become an unreadable 
mess. Hiding the overflow on 
such boxes helps prevent items 
overlapping on the page. 
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BORDER, MARGIN 
& PADDING 


Every box has three available properties that 
can be adjusted to control its appearance: 


BORDER MARGIN PADDING 
Every box has a border (even if Margins sit outside the edge Padding is the space between 
it is not visible or is specified to of the border. You can set the the border of a box and any 
be O pixels wide). The border width of a margin to create a content contained within it. 
separates the edge of one box gap between the borders of two Adding padding can increase the 
from another. adjacent boxes. readability of its contents. 


If you specify a width 
for a box, then the 
borders, margin, and 
padding are added to 
its width and height. 


[507] BOXES 


Moog 


Moog synthesisers were created 
by Dr. Robert Moog under the 
company name Moog Music. 
Popular models include the Moog 
Modular, Minimoog, Micromoog, 
Moog Rogue, and Moog Source. 


ARP 


ARP Instruments Inc. was set up 
by Alan Peralman, and was the 
main competitor for Moog during 
the 1970'x. Popular models 
include the Arp 2600 and the 
ARP Odyssey. 


Sequential Circuits 


Sequential Circuits Inc was 
founded by Dave Smith, and the 
company was pivotal in the 
creation of MIDI. Famous models 
include the Prophet 5, Prophet 
600, and Pro-One. 


Designers refer to the space 
between items on a page as 
white space. Imagine you had 

a border around a box. You 
would not want the text to touch 
this border or it would become 
harder to read. 


WHITE SPACE & 


Moog 


Moog synthesisers were created 
by Dr. Robert Moog under the 
company name Moog Music. 
Popular models include the Moog 
Modular, Minimoog, Micromoog, 
Moog Rogue, and Moog Source. 


ARP 


ARP Instruments Inc. was set up 
by Alan Peralman, and was the 
main competitor for Moog during 
the 1970'x. Popular models 
include the Arp 2600 and the 
ARP Odyssey. 


Sequential Circuits 


Sequential Circuits Inc was 
founded by Dave Smith, and the 
icompany was pivotal in the 
creation of MIDI. Famous models 
include the Prophet 5, Prophet 
600, and Pro-One. 


Or, imagine you had two boxes 
sitting side by side (each with 

a black border). You would not 
necessarily want the boxes to 
touch edges as this would make 
the line look twice as thick on 
the facing sides. 


VERTICAL MARGIN 


The padding and 
margin properties 
are very helpful 

in adding space 
between various 
items on the page. 


If the bottom margin of any 

box touches the top margin of 
another, the browser will render 
it differently than you might 
expect. It will only show the 
larger of the two margins. If both 
margins are the same size, it will 
only show one. 


BOXES [505] 


BORDER WIDTH 
border-width 


The border-width property 
is used to control the width 
of a border. The value of this 
property can either be given 
in pixels or using one of the 
following values: 


thin 
medium 
thick 


(You cannot use percentages 
with this property.) 


You can control the individual 
size of borders using four 
separate properties: 


border-top-width 
border-right-width 
border-bottom-width 
border-left-width 


You can also specify different 
widths for the four border values 
in one property, like so 


border-width: 2px lpx 1px 
2px; 


The values here appear in 


clockwise order: top, right, 
bottom, left. 
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chapter-13/border-width.html 


<p class="one">Hohner's "Clavinet" is essentially an 


electric clavichord.</p> 


<p class="two">Hohner's "Clavinet" is essentially an 


electric clavichord.</p> 


<p class-"three"»Hohner's "Clavinet" is essentially 


an electric clavichord.</p> 


p.one { 

border-width: 2px; } 
p.two { 

border-width: thick; } 
p.three { 


border-width: 1px 4px 12px 4px;} 


Hohner's "Clavinet" is 


essentially an electric 
lavichord. 


Hohner's "Clavinet" is 
essentially an electric 
lavichord. 


Hohner's "Clavinet" is 
essentially an electric 


lavichord. 


CSS 


<p 
<p 
<p 
<p 
<p 
<p 
<p 
<p 


e 
[^2] 
n 
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.one (border-style: 
.two {border-style: dotted;) 

.three (border-style: dashed;) 
.four {border-style: double;] 
.five {border-style: groove;] 
.Six {border-style: 
.seven (border-style: 
.eight (border-style: outset;]) 


BORDER STYLE 


class="one">Wurlitzer 
class="two">Wu 


class="three">Wur 


Electric Piano</p> 
Electric Piano</p> 
Electric Piano</p> 


litzer 
itze 


class="four">Wurlitzer Electric Piano</p> 
class-"five"»Wurlitzer Electric Piano</p> 
class="six">Wurlitzer Electric Piano</p> 


class="seven">Wur 
class="eight">Wur 


itzer Electric Piano</p> 
itzer Electric Piano</p> 


solid; } 


ridge; } 
inset; } 


urlitzer Electric Piano 


urlitzer Electric Piano 


—e_e ee ee -———— 


IWurlitzer Electric Piano | 
[Wurlitzer Electric Piano J 
Wurlitzer Electric Piano 


|Wurlitzer Electric Piano 
Wurlitzer Electric: Piano | 


chapter-13/border-style.html 


border-style 


You can control the style of a 
border using the border-style 
property. This property can take 
the following values: 


solid a single solid line 


dotted a series of square dots 
(if your border is 2px wide, then 
the dots are 2px squared with a 
2px gap between each dot) 


dashed a series of short lines 


double two solid lines (the 
value of the border-width 
property creates the sum of the 
two lines) 


groove appears to be carved 
into the page 


ridge appears to stick out from 
the page 


inset appears embedded into 
the page 


outset looks like it is coming 
out of the screen 


hidden / none no border is 
shown 


You can individually change the 
styles of different borders using: 
border-top-style 
border-left-style 
border-right-style 
border-bottom-style 
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BORDER COLOR 


border-color 


e in E chapter-13/border-color.html 
hex codes or CSS color names <p class="one">The ARP Odyssey was introduced in 
(as you saw on pages 251-252). 1972.</p> 
<p class="two">The ARP Odyssey was introduced in 
It is possible to individually 1972.</p> 


control the colors of the borders 
on different sides of a box using: 


border-top-color SE 
border-right-color p.one { 

border-bottom-color border-color: #0088dd; } 

border-left-color p.two { 


border-color: #bbbbaa #111111 #ee3e80 #0088dd; } 
It is also possible to use a 
shorthand to control all four 
border colors in the one =] 
property: Ll 


he ARP Odyssey was 
border-color: darkcyan introduced in 1972. 


deeppink darkcyan 


deeppink; ———————— 
he ARP Odyssey was 

The values here appear in introduced in 1972. 

clockwise order: top, right, 

bottom, left. 


You could also use HSL values 
to specify the color as shown 
on pages 255-256. However, 
these were only introduced in 
CSS3 and will not work in older 
browsers. 
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SHORTHAND 


border 


The border property allows you 


HTML chapter-13/border-shorthand.html to specify the width, style and 
<p>Here is a simple chord sequence played on a color of a border in one property 
Hammond organ through a Leslie speaker.</p> (and the values should be coded 
in that specific order). 
CSS 
p { 


width: 250px; 
border: 3px dotted #0088dd;} 


:Here is a simple chord sequence : 
;played on a Hammond organ : 
‘through a Leslie speaker. : 


BOXES 312 


313 


PADDING 


padding 


The padding property allows 
you to specify how much space 
should appear between the 
content of an element and its 
border. 


The value of this property is 

most often specified in pixels 
(although it is also possible to 
use percentages or ems). If a 
percentage is used, the padding 
is a percentage of the browser 
window (or of the containing box 
if it is inside another box). 


Please note: If a width is 
specified for a box, padding is 
added onto the width of the box. 


As you can see, the second 
paragraph here is much easier 
to read because there is a space 
between the text and the border 
of the box. The box is also wider 
because it has padding. 


You can specify different values 
for each side of a box using: 


padding-top 
padding-right 
padding-bottom 
padding-left 


Or you can use a shorthand 
(where the values are in 
clockwise order: top, right, 


bottom, left): 


padding: 10px 5px 3px 1px; 


BOXES 


chapter-13/padding.html 


<p>Analog synths produce a wave sound, whereas the 


sounds stored on a digital 


synth have been 


sampled and then turned into numbers.</p> 


<p class="example">Analog synths produce a wave 


sound, whereas the sounds stored on a digital 
synth have been sampled and then 


pt 


width: 275px; 
border: 2px solid #0088dd;} 


p.example ( 


padding: 10px;} 


= SE pe 


Analog synths produce a wave sound, 
hereas the sounds stored on a digital 


ynth have been sampled and then 


turned into numbers. 


Analog synths produce a wave sound, 
whereas the sounds stored on a digital 


synth have been sampled and then 
turned into numbers, 


CSS 


The value of the padding property is not inherited by child elements in 
the same way that the color value of the font-family property is; so 
you need to specify the padding for every element that needs to use it. 


Up until Internet Explorer 6, the width of the box would include the 
padding and margins. You can see more about this on page 316. 


HTML chapter-13/margin.html 


<p>Analog synthesizers are often said to have a 
"warmer" sound than their digital counterparts. 
</p> 

<p class="example">Analog synthesizers are often 
said to have a "warmer" sound than their digital 
counterparts.</p> 


CSS 


p { 
width: 200px; 
border: 2px solid #0088dd; 
padding: 10px;} 
p.example { 
margin: 20px;] 


Analog synthesizers are 
often said to have a 
"warmer" sound than their 
digital counterparts. 


Analog synthesizers are 
often said to have a 
"warmer" sound than their 
digital counterparts. 


The value of the margin property is not inherited by child elements in 
the same way that the color value of the font-family property is, so 
you need to specify the margin for every element that needs to use it. 


Up until Internet Explorer 6, the width of the box would include the 
padding and margins. You can see more about this on page 316. 


MARGIN 


margin 


The margin property controls 
the gap between boxes. Its value 
is commonly given in pixels, 
although you may also use 
percentages or ems. 


If one box sits on top of another, 
margins are collapsed , which 
means the larger of the two 
margins will be used and the 
smaller will be disregarded. 


Please note: If the width of a box 
is specified then the margin is 
added to the width of the box. 


You can specify values for each 
side of a box using: 


margin-top 
margin-right 
margin-bottom 
margin-left 


You can also use the shorthand 
(where the values are in 
clockwise order: top, right, 
bottom, left): 

margin: 1px 2px 3px 4px; 


Sometimes you might see the 
following, which means that the 
left and right margins should be 
10 pixels and the top and bottom 
margins should be 20 pixels: 
margin: 10px 20px; 


(This same shorthand shown 


above can also be applied to 
padding.) 
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CENTERING CONTENT 


use c UM chapter-13/centering-content.html 
the element that it sits in), you <body> 
can set the left-margin and <p>Analog synthesizers are often said to have a 
right-margin to auto. "warmer" sound than their digital 
counterparts.</p> 
In order to center a box on the <p class="example">Analog synthesizers are often 
page, you need to set awidth said to have a "warmer" sound than their 
for the box (otherwise it will take digital counterparts.</p> 
up the full width of the page). </body> 


Once you have specified the 
width of the box, setting the left 
and right margins to auto will 


CSS 


make the browser put an equal body { 
gap on each side of the box. This text-align: center;) 
centers the box on the page (or pt 
within the element that the box width: 300px; 
sits inside). padding: 50px; 
border: 20px solid #0088dd; } 
In order for this to work in older p.example ( 
browsers (particularly IE6), the margin: 10px auto 10px auto; 
element that the box sits inside text-align: left;} 


should have a text-align 
property with its value set to 
Genie 


The text-align property is 
inherited by child elements. You 
therefore also need to specify 
the text-align property on the 
centered box if you do not want 
the text inside it to be centered. 
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IE6 BOX MODEL 


When you specify the width of 


RESULT IN IE6 WITHOUT DOCTYPE i 3 
a box, any padding or margin 


should be added to the width of 


it. Internet Explorer 6, however, 
has a quirk whereby it includes 
the padding and margins in the 


Ringe vr have width of the box. 


a "wanner" sound 


The way around this is to ensure 
that you provide a DOCTYPE 
declaration for the HTML page. 
(DOCTYPE declarations were 
m— covered on page 181.) You can 
oe use either the HTML5, HTML 
than their digital 4 strict, or HTML 4 transitional 
counterparts. 

DOCTYPE declarations to 
ensure that IEG follows the 
correct box model. 


To demonstrate this, you can 
see the example from the left 
RESULT IN IE6 WITH DOCTYPE À ‘ 
hand page shown in IE6, first 
without a DOCTYPE declaration 
and then again with the HTML5 
DOCT YPE declaration. 


Analog synthesizers are often said to 
have a "wanner" sownd than them digital 
counterparts 


Analog synthesizers are often said to 
have a “warmer” sound than thew digital 
counterparts 
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CHANGE INLINE/BLOCK 


display 


The display property allows 
you to turn an inline element 
into a block-level element or vice 
versa, and can also be used to 
hide an element from the page. 


The values this property can 
take are: 


inline 

This causes a block-level 
element to act like an inline 
element. 


block 


This causes an inline element to 
act like a block-level element. 


inline-block 

This causes a block-level 
element to flow like an inline 
element, while retaining other 
features of a block-level element. 


none 

This hides an element from the 
page. In this case, the element 
acts as though it is not on the 
page at all (although a user could 
still see the content of the box if 
they used the view source option 
in their browser). 


If you use this property, it is 
important to note that inline 
boxes are not supposed to create 
block-level elements. 
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chapter-13/display.html 


<ul> 
<1i>Home</1i> 
<1i>Products</1i> 


«li class="coming-soon">Services</1i> 


<1i>About</1i> 
<1i>Contact</1i> 
</ul> 


li t 
display: inline; 
margin-right: 10px;] 
li.coming-soon { 
display: none;] 


CSS 


Home Products About Contact 


In this example you can see 

a list. Each item in the list is 
usually treated as a block-level 
element, but the rule for the 
«li» elements indicates that 
they should be treated as inline 
elements, which means they will 
sit alongside each other rather 
than appearing on new lines. 


This technique is often used to 
create navigation for a site, and 
in this example a margin has 
been added to the right of each 
of the items to separate them 
out. The rule that applies to the 
«li» element whose class is 
coming-soon has been hidden 
as if it were not in the page at all. 


<ul> 
<1i>Home</1i> 
<1i>Products</1i> 


HIDING BOXES 


chapter-13/visibility.html 


«li class="coming-soon">Services</1i> 


<1i>About</1i> 
<1i>Contact</1i> 
</ul> 


li t 
display: inline; 
margin-right: 10px} 
li.coming-soon { 
visibility: hidden;) 


Home Products 


About Contact 


visibility 


The visibility property allows 
you to hide boxes from users 
but It leaves a space where the 
element would have been. 


This property can take two 
values: 


hidden 


This hides the element. 


visible 


This shows the element. 


Ifthe visibility of an element 
is set to hidden, a blank space 
will appear in its place. 


If you do not want a blank space 
to appear, then you should use 
the display property with 

a value of none instead (as 
covered on the previous page). 


Please note that anyone can view 
the contents of any elements 
whose visibility property has 
been set to hidden by viewing 
the source in their browser. 
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CSS3: BORDER IMAGES 


border-image 


Do ETT chapter-13/border-image.html 
any box. It takes a background <p class="one"></p> 
image and slices it into nine <p class="two"></p> 
pieces. <p class="three"></p> 
Here is the image. | have @/@|@ 
added marks where it is DEO 
sliced in the example, ejeje CSS 
taking 18 pixels from each corner p.one ( 
to place an entire circle in each -moz-border-image: url("images/dots.gif") 
corner. The corner slices are 11 11 11 11 stretch; 
always placed in the four corners -webkit-border-image: url("images/dots.gif") 
of the box, but we have a choice il 11 11 4. SEO E CHE 
whether the sides are stretched border-image: url("images/dots.gif") 
or repeated. 11 11 11 11 stretch;) 

p.two ( 
This property requires three -moz-border-image: url("images/dots.gif") 
pieces of information: 11 11 11 11 round; 

-webkit-border-image: url("images/dots.gif") 

1: The URL of the image 11 11 11 11 round; 
2: Where to slice the image border-image: url("images/dots.gif") 
3: What to do with the straight 11 11 11 11 round;) 


edges; the possible values are: 
stretch stretches the image 
repeat repeats the image 
round like repeat but if the 
tiles do not fit exactly, scales 
the tile image so they will 


The box must also have a border 
width for the image to be shown. 


The -moz-border-image 

and -webkit-border-image 
properties are not in the CSS 
specification but help earlier 
versions of Chrome, Firefox, and 
Safari display this effect. 
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CSS 


C555: BOX SHADOWS 


chapter-13/box-shadow.html 


.one ( 


-moz-box-shadow: -5px -5px #777777; 
-webkit-box-shadow: -5px -5px #777777; 
box-shadow: -5px -5px #777777;} 


.two { 


-moz-box-shadow: 5px 5px 5px #777777; 
-webkit-box-shadow: 5px 5px 5px #777777; 
box-shadow: 5px 5px 5px #777777;} 


.three { 


-moz-box-shadow: 5px 5px 5px 5px #777777; 


-webkit-box-shadow: 5px 5px 5px 5px #777777; 


box-shadow: 5px 5px 5px 5px #777777;} 


four { 


-moz-box-shadow: 0 0 10px #777777; 
-webkit-box-shadow: 0 0 10px #777777; 
box-shadow: 0 0 10px #777777;} 


.five { 


-moz-box-shadow: inset 0 0 10px #777777; 
-webkit-box-shadow: inset 0 0 10px #777777; 
box-shadow: inset 0 0 10px #777777;} 


i ES el 


box-shadow 


The box-shadow property 
allows you to add a drop shadow 
around a box. It works just like 
the text-shadow property that 
you met on page 288. It must 
use at least the first of these two 
values as well as a color: 


HORIZONTAL OFFSET 
Negative values position the 
shadow to the left of the box. 


VERTICAL RES E 
Negative values position the 
shadow to the top of the box. 


BLUR DISTANCE 
If omitted, the shadow is a solid 
line like a border. 


SPREAD OF SHADOW 

If used, a positive value will 
cause the shadow to expand in 
all directions, and a negative 
value will make it contract. 


The inset keyword can also 
be used before these values to 
create an inner-shadow. 


Chrome, Firefox, and Safari were 
quick to support this property 
using the -moz-box-shadow 
and -webkit-box-shadow 
properties. These are not in the 
CSS specification but using them 
can help this style to work in 
these browsers 
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CSS3: ROUNDED CORNERS 


border-radius 


Se ee chapter-13/border-radius.html 
box, using a property called <p>Pet Sounds featured a number of unconventional 
border-radius. The value instruments such as bicycle bells, buzzing 

indicates the size of the radius organs, harpsichords, flutes, Electro-Theremin, 

in pixels. dog whistles, trains, Hawailan-sounding string 


instruments, Coca-Cola cans and barking dogs.</p> 
Older browsers that do not 
support this property will show a 
box with right-angled corners. 


css 
The -moz-border-radius pít 
and -webkit-border-radius border: 5px solid #cccccc; 
properties are not in the CSS padding: 20px; 
specification. However, they width: 275px; 
are used in some versions of text-align: center; 
Chrome, Firefox, and Safari to border-radius: 10px; 
offer early support for this style -moz-border-radius: 10px; 
(and therefore can be used -webkit-border-radius: 10px;} 
to achieve this effect in more 
browsers). 


You can specify individual values 
for each corner of a box using: 


border-top-right-radius 
border-bottom-right-radius 
border-bottom-left-radius 
border-top-left-radius 


You can also use a shorthand 
of these four properties (in 


Pet Sounds featured a number of 
unconventional instruments such äs 


clockwise order: top, right, bicycle bells, buzzing organs, 

bottom, left). For example: harpsichords, flutes, Electro-Theremin, 
dog whistles, trains, Hawaiian-sounding 
string instruments, Coca-Cola cans and 

border-radius: 5px, 10px, barking dogs. 

5px, 10px; 
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CSS3: ELLIPTICAL SHAPES 


border-radius 


— To create more complex shapes, 
HTML chapter-13/elliptical-shapes.html i : 
you can specify different 
<p class="one"></p> distances for the horizontal and 
<p class="two"></p> the vertical parts of the rounded 
<p class="three"></p> corners. 


For example, this will create a 
radius that is wider than it is tall: 


border-radius: 80px 50px; 


css 
p.one { € 80px > 
border-top-left-radius: 80px 50px; 
-moz-border-radius-top-left: 80px 50px; | 
-webkit-border-radius-top-left: 80px 50px;} 
p.two { ayes 
border-radius: lem 4em lem 4em / 2em lem 2em lem; 
-moz-border-radius: lem 4em lem 4em 
/ 2em lem 2em lem; 
-webkit-border-radius: lem 4em lem 4em You can target just one corner 
/ 2em lem 2em lem; } using the individual properties 
p.three { for that corner: 
padding: Opx; 
border-radius: 100px; border-top-left-radius: 
-moz-border-radius: 100px; 80px 50px; 


-webkit-border-radius: 100px;} 

There is also a shorthand for 
targetting all four corners at 
once; first you specify the four 
horizontal values, then the four 
vertical values, as shown in the 
second shape on the left. 


You can even create a circle by 
taking a square box and making 
the border-radius the same 
height as the square, as shown in 
the third shape on the left. 
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@ Boxes - Mozilla Firefox 
Be Edt yew Hgoy Gookmarks Tools Help 


fa itp: JJwmen.hemlanidcssbook. comfcode [chapter 13/examole html 


FOR SALE REPAIRS ABOUT CONTACT 


We specialise in the sales and repair of classic keyboards, 
in particular the Fender Rhodes, Wurlitzer EP200, and Hohner 
Clavinet. 
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EXAMPLE 


BOXES 


In this example, you can see a simple 
homepage for a music shop. 


The whole page sits inside a <div> element with an id of page. This is 
centered using the margin property, with a value of auto for the left and 
right margins. The logo and other content are centered using this same 
technique. 


The main <div> has a double-lined border around it, and the size of 

this box will expand and contract if the browser window is resized. To 
prevent the page from becoming too narrow or too wide, the min-width 
and max-width properties are used. 


The navigation is created using an unordered list. There are borders 

set to the top and bottom of this list to make it stand out. The display 
property has been applied to each of the items in the list so they behave 
like inline (rather than block-level) elements. This enables the navigation 
links to sit next to each other horizontally. The padding property has 
been used to create space between each of the links. 


The width property for the <ul> element is set to 570 pixels, and the 
width property for the <p> elements beneath them is set to 600 pixels. 
They actually end up the same width as each other because the <ul> 
element also uses padding to create a gap between the border of the box 
it creates and the links inside of it, and any padding, borders, or margins 
are added to the width and height of the box. 


If we had not included a DOCTYPE declaration at the start of this page, 
the sizes of the boxes would be different to each other in Internet 
Explorer 6 because this browser did not implement the box model in the 
correct way. 
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EXAMPLE 


BOXES 


<!DOCTYPE html» 


«html» 
<head> 
<title>Boxes</title> 
<style type="text/css"> 
body { 


font-size: 80%; 
font-family: "Courier New", Courier, monospace; 
letter-spacing: 0.15em; 
background-color: #efefef;} 
fipage { 
max-width: 940px; 
min-width: 720px; 
margin: 10px auto 10px auto; 
padding: 20px; 
border: 4px double #000; 
background-color: #ffffff;} 
#logo { 
width: 150px; 
margin: 10px auto 25px auto;} 
ul t 
width: 570px; 
padding: 15px; 
margin: Opx auto Opx auto; 
border-top: 2px solid #000; 
border-bottom: 1px solid #000; 
text-align: center; } 
Va. d 
display: inline; 
margin: Opx 3px; } 
p { 
text-align: center; 
width: 600px; 
margin: 20px auto 20px auto; 
font-weight: normal; } 
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EXAMPLE 


BOXES 


Box 
color: #000000; 
text-transform: uppercase; 
text-decoration: none; 
padding: 6px 18px 5px 18px;} 
a:hover, a.on { 
color: ##cc3333; 
background-color: #ffffff;} 
</style> 
</head> 
<body> 
<div id="page"> 
<div id="logo"> 
<img src="images/logo.gif" alt="The Analog Specialists" /> 
</div> 
<ul id="navigation"> 
<1i><a href="#" class="on">Home</a></1i> 
<li><a href="#">For Sale</a></1i> 
<li><a href="#">Repairs</a></1i> 
<li><a href="s#">About</a></1i> 
<li><a href="#">Contact</a></1i> 
</ul> 
<p> 
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, 
and Wurlitzer EP200" /> 
</p> 
<p> 
We specialise in the sales and repair of classic keyboards, in particular 
the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet. 
</p> 
</div> 
</body> 
</html> 
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SUMMARY 


BOXES 


CSS treats each HTML element as if it has its own box. 
You can use CSS to control the dimensions of a box. 


You can also control the borders, margin and padding 
for each box with CSS. 


It is possible to hide elements using the display and 
visibility properties. 


Block-level boxes can be made into inline boxes, and 
inline boxes made into block-level boxes. 


Legibility can be improved by controlling the width of 
boxes containing text and the leading. 


CSS3 has introduced the ability to create image 
borders and rounded borders. 


LISTS, TABLES 


AND FORMS 


> Specifying bullet point styles 
> Adding borders and backgrounds to tables 
> Changing the appearance of form elements 


There are several CSS properties that 
were created to work with specific types 
of HTML elements, such as lists, tables, 
and forms. 


In this chapter you will learn how to: 

® Specify the type of bullet point or numbering on lists 
* Add borders and backgrounds to table cells 

® Control the appearance of form controls 


Together, these properties allow you to take finer control over 
specific parts of your pages. 


Safari File Edit View History Bookmarks Develop Window — Help 


AOA Lists, Tables and Forms 


ale JLA ] LETO noi mmm ht mlancssbook.com/code/chapter-14/example-htmt 


Poetry Workshops 


We will be conducting a number of pot 
Please note that the foliow 


O A Poetic Persp 
O Walt Whiter 
OF 1 Poems an 


A Poetic Perspective 


Walt Whitman at War 


Found Poems & Outsider Poetry 


Natural Death: An Exploration 
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BULLET POINT STYLES 
list-style-type 


The list-style-type property 
allows you to control the shape 
or style of a bullet point (also 
known as a marker). 


It can be used on rules that 
apply to the <ol>, <ul>, and «li» 
elements. 


UNORDERED LISTS 
For an unordered list you can use 
the following values: 


none 
@ disc 
O circle 
B square 


ORDERED LISTS 
For an ordered (numbered) list 


you can use the following values: 


decimal 
i 2 8 


decimal-leading-zero 
01 02 03 


lower-alpha 
a d e 


upper-alpha 
ABC 


lower-roman 
i Ui. NH 


upper-roman 
HE Ul 
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<hl>The Complete Poems</h1> 
<h2>Emily Dickinson</h2> 
<ol> 
<1i>Life</1i> 
<1i>Nature</1i> 
<1i>Love</1i> 
«li»Time and Eternity</1i> 
<1i>The Single Hound</1i> 
S01» 


CSS 


ol { 
list-style-type: lower-roman;] 


The Complete Poems 


Emily Dickinson 


i. Life 
ii, Nature 
iii. Love 
iv. Time and Eternity 
v. The Single Hound 


IMAGES FOR BULLETS 


list-style-image 


HTML chapter-14/list-style-image.html 


«hl»Index of Translated Poems</h1> 
<h2>Arthur Rimbaud</h2> 
<ul> 
<1i>0phelia</1i> 
<1i>To Music</1i> 
<1i>A Dream for Winter</1i> 
<1i>Vowels</1i> 
<1i>The Drunken Boat</1i> 
</ul> 


CSS 


ul 4 

list-style-image: url("images/star.png");] 
li 4 

margin: 10px 0px 0px Opx;} 


Index of Translated Poems 
Arthur Rimbaud 


- Ophelia 

- To Music 
A Dream for Winter 
Vowels 


— The Drunken Boat 


You can specify an image to act 
as a bullet point using the 
list-style-image property. 


The value starts with the letters 
url and is followed by a pair 

of parentheses. Inside the 
parentheses, the path to the 
image is given inside double 
quotes. 


This property can be used on 
rules that apply to the <ul> and 
«li» elements. 


The example on this page also 
shows the use of the margin 
property to increase the vertical 
gap between each item in the 
list. 
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POSITIONING THE MARKER 


list-style-position 


Lists are indented into the page 
by default and the list-style- 
position property indicates 
whether the marker should 
appear on the inside or the 
outside of the box containing the 
main points. 


This property can take one of 
two values: 


outside 

The marker sits to the left of the 
block of text. (This is the default 
behaviour if this property is not 
used.) 


inside 
The marker sits inside the box of 
text (which is indented). 


In the example shown, the width 
of the list has been limited to 150 
pixels. This ensures that the text 
wraps onto a new line so you can 
see how the value of inside sits 
the bullet inside the first line of 
text. 


A margin has been added to 


each list item so that there is a 
clear gap between each. 


LISTS, TABLES AND FORMS 


chapter-14/list-style-position.html 


<ul class-"illuminations"»? 


«li»That idol, black eyes and 
s OA IIS 


«li»Gracious son of Pan! 


«li»When the world is reduced 


</ul> 
<ul class="season"> 


«li»0nce, if my memory serves 


«li»Hadn't I once a youth 
«li»Autumn already! 
</ul> 


ul { 
width: 150px; } 
li t 
margin: 10px;] 
ul.illuminations { 
list-style-position: 
ul.season { 
list-style-position: 


© That idol, black eyes and yellow 
mop, without parents or court .., 


* Gracious son of Pan! Around your 
forehead crowned with flowerets .. 


* When the world is reduced to a 
single dark wood for our four ... 


oS 


see Su 


oss Edo 
seS TS 


sec GE Ni? 


outside; } 


inside; } 


* Once, if my memory serves me 
well, my life was a banquet ... 


è Hadn't I once a youth that was 
lovely, heroic, fabulous ... 


* Autumn already! - But why 
regret the everlasting sun if we are 


CSS 


LIST SHORIHAND 


HTML chapter-14/list-style.html 
«hl»Quotes from Edgar Allan Poe</h1> 
<ul> 


<li> I have great faith in fools; self-confidence 
my friends call it.«/li» 
Xli»All that we see or seem is but a dream within 
a dream.</1i> 
«li»I would define, in brief, the poetry of words 
as the rhythmical creation of Beauty.</1i> 

</ul> 


CSS 


ul { 
list-style: inside circles 
width: 300px;} 

hay et 
margin: 10px Opx 0px Opx;} 


| Quotes from Edgar Allan Poe 


© [ have great faith in fools; self-confidence 
my friends call it, 


o All that we see or seem is but a dream 
within a dream. 


o [| would define, in brief, the poetry of words 
as the rhythmical creation of Beauty. 


list-style 


As with several of the other CSS 
properties, there is a property 
that acts as a shorthand for list 
styles. It is called list-style, 
and it allows you to express 

the markers’ style, image and 
position properties in any order. 
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TABLE PROPERTIES 


You have already met several 
properties that are commonly 
used with tables. Here we will 
put them together in a single 
example using the following: 


width to set the width of the 
table 


padding to set the space 
between the border of each table 
cell and its content 


text-transformto convert the 
content of the table headers to 
uppercase 


letter-spacing, font-size 
to add additional styling to the 
content of the table headers 


border-top, border-bottom 
to set borders above and below 
the table headers 


text-align to align the writing 
to the left of some table cells and 
to the right of the others 


background-color to change 
the background color of the 


alternating table rows 


:hover to highlight a table row 
when a user's mouse goes over it 
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<hl>First Edition Auctions</h1> 
<table> 
<tr> 
<th>Author</th> 
<th>Title</th> 
«th class="money">Reserve Price</th> 
<th class="money">Current Bid</th> 
</tr> 
<tr> 
<td>E.E. Cummings</td> 
<td>Tulips & Chimneys</td> 
<td class="money">$2,000.00</td> 
<td class="money">$2,642.50</td> 
<7 tr? 
<tr class="even"> 
<td>Charles d'Orleans</td> 
<td>Poemes</td> 
<td class="money"></td> 
<td class="money">$5,866.00</td> 
</tr> 
<tr> 
<td>T.S. Eliot</td> 
<td>Poems 1909 - 1925</td> 
<td class="money">$1,250.00</td> 
<td class="money">$8,499.35</td> 
<7 tr? 
<tr class="even"> 
<td>Sylvia Plath</td> 
<td>The Colossus</td> 
<td class="money"></td> 
<td class="money">$1031.72</td> 
</tr> 
</table> 


body { 
font-family: Arial, Verdana, sans-serif; 
color: #111111;} 


table { 

width: 600px; } 
th, td { 

padding: 7px 10px 10px 10px;} 
th { 


text-transform: uppercase; 
letter-spacing: O.lem; 
font-size: 902; 
border-bottom: 2px solid #111111; 
border-top: 1px solid #999; 
text-align: left;} 
tr.even ( 
background-color: jlefefef;) 
tr:hover ( 
background-color: #c3e6e5;} 
.money { 
text-align: right;} 


First Edition Auctions 


AUTHOR TITLE RESERVE PRICE CURRENT BID 
E.E. Cummings Tulips & Chimneys $2,000.00 $2,642.50 
Charles d'Orleans Poemes $5,866.00 
T.S, Eliot Poems 1909 - 1925 $1,250.00 $8,499.35 
Sylvia Plath The Colossus $1031.72 


Here are some tips for styling 
tables to ensure they are clean 
and easy to follow: 


GIVE CELLS PADDING 

If the text in a table cell either 
touches a border (or another 
cell), it becomes much harder to 
read. Adding padding helps to 
improve readability 


DISTINGUISH HEADINGS 
Putting all table headings in 
bold (the default style for the 
<th> element) makes them 
easier to read. You can also 
make headings uppercase and 
then either add a background 
color or an underline to clearly 
distinguish them from content. 


SHADE ALTERNATE ROWS 
Shading every other row can 
help users follow along the lines. 
Use a subtle distinction from the 
normal color of the rows to keep 
the table looking clean. 


ALIGN NUMERALS 

You can use the text-align 
property to align the content 

of any column that contains 
numbers to the right, so that 
large numbers are clearly 
distinguished from smaller ones. 


ONLINE EXTRA 

There are more examples of 
using CSS to style tables in the 
tools section of the website. 
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BORDER ON EMPTY CELLS 


empty-cells 


If you have empty cells in 
your table, then you can use 
the empty-cells property to 
specify whether or not their 
borders should be shown. 


Since browsers treat empty cells 
in different ways, if you want to 
explicitly show or hide borders 
on any empty cells then you 
should use this property. 


It can take one of three values: 


show 
This shows the borders of any 
empty cells. 


hide 
This hides the borders of any 
empty cells. 


inherit 

If you have one table nested 
inside another, the inherit 
value instructs the table cells to 
obey the rules of the containing 
table. 


In the first table on the left, you 
can see that the border of the 
empty cell is showing. In the 
second table, it is hidden. 
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chapter-14/empty-cells.html 


<table class="one"> 
cor 
<td>1</td> 
<td>2</td> 
</tr> 
<tr 
<td>3</td> 
<td></td> 
</tr> 
</table> 


CSS 


td { 
border: 1px solid #0088dd; 
padding: 15px;} 
table.one ( 
empty-cells: show; } 
table.two { 
empty-cells: hide; } 


GAPS BEIWEEN CELLS 


border-spacing, border-collapse 


The border-spacing property 
chapter-14/gaps-between-cells.html I t TOM 
allows you to control the 
<table class="one"> distance between adjacent cells. 
<tr> By default, browsers often leave 
<td>1</td> a small gap between each table 
<td>2</td> cell, so if you want to increase 
</tr> or decrease this space then 
<tr> the border-spacing property 
<td>3</td> allows you to control the gap. 
<td>4</td> 
</tr> The value of this property is 
</table> usually specified in pixels. You 


can specify two values if desired 
to specify separate numbers for 


horizontal and vertical spacing. 
td ( When a border has been used 
background-color: #0088dd; on table cells, where two cells 
padding: 15px; meet, the width of lines would be 
border: 2px solid #000000; } twice that of the outside edges. 
table.one { It is possible to collapse adjacent 
border-spacing: 5px 15px;} borders to prevent this using the 
table.two { border-collapse property. 
border-collapse: collapse; } Possible values are: 
collapse 


Borders are collapsed into a 
single border where possible. 
(border-spacing will be 
ignored and cells pushed 
together, and empty-cells 
properties will be ignored.) 


separate 

Borders are detached from each 
other. (border-spacing and 
empty-cells will be obeyed.) 
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STYLING FORMS 


Nobody | know enjoys filling 

in forms, so if you can make 
yours look more attractive and 
easier to use, more people are 
likely to fill it in. Also, when you 
come to look at a form in a few 
different browsers (as shown 
on the right), you will see that 
each browser displays them 
differently. 


CSS is commonly used to 
control the appearance of form 
elements. This is both to make 
them more attractive and to 
make them more consistent 
across different browsers 


It is most common to style: 

® Text inputs and text areas 
® Submit buttons 

* Labels on forms, to get the 


form controls to align nicely 


In the coming pages you will see 
how to control these with CSS. 


Styling text inputs and submit 
buttons is fairly easy. It is 
harder to get select boxes, radio 
buttons, and checkboxes to look 
consistent across all browsers. 
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MAC: SAFARI MAC: FIREFOX 
Text input: Text input: 
Password: Password: 
Turieria: Textarea: EE 
Select box: Option 1:8) Select box: [ Option 1 7$) | 


Radio buttons: Radio 1 Radio 2 
© Checkbox 


Radio buttons: C Radio 1 ORadio 2 


O Checkbox 
(Submit. : 
PC: CHROME PC: IE 
Text input Text input: 
Password; Password: 
Textarea Textarea: 
Select box Option 1 +] Select box: Option 1 | 


Radio buttons; ORadio? ORadio2 


O Checkbox 


{Submit} 


Radio buttons: | o Radio 1 ORadio 2 
© Checkbox 


[Submit Query) 


To achieve this, you might like to 
download the CSS files available 
at http://formalize.me. 

The author of this website has 
done the hard work of making 


forms look consistent across 
browsers. Although the solution 
incorporates JavaScript, no prior 
knowledge of this is needed in 
order to implement the code. 


STYLING TEXT INPUTS 


CSS 


input { 
font-size: 120%; 
color: #5a5854; 


background-color: 


chapter-14/styling-text-inputs.html 


FETTI 


border: 1px solid #bdbdbd; 
border-radius: 5px; 

padding: 5px 5px 5px 30px; 
background-repeat: no-repeat; 
background-position: 8px 9px; 


display: block; 


margin-bottom: 10px;} 


input:focus { 


background-color: 


fff tft; 


border: 1px solid #blele4;} 


input#email { 


background-image: 


input#twitter { 


background-image: 


inputi#web { 


background-image: 


url("images/email.png");] 


url("images/twitter.png");} 


url("images/web.png");) 


This example demonstrates the 
CSS properties commonly used 
with text inputs, most of which 

you have already met. 


font-size sets the size of the 
text entered by the user. 


color sets the text color, and 
background-color sets the 
background color of the input. 


border adds a border around 
the edge of the input box, and 
border-radius can be used 
to create rounded corners (for 
browsers that support this 
property). 


The :focus pseudo-class is 
used to change the background 
color of the text input when it 

is being used, and the :hover 
psuedo-class applies the same 
styles when the user hovers over 
them. 


background-image adds a 
background image to the box. 
Because there is a different 
image for each input, we are 
using an attribute selector 
looking for the value of the id 
attribute on each input. 


You will learn more about 


background images and how to 
position them in Chapter 16. 
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STYLING SUBMIT BUTTONS 


Here are some properties that 


can be used to style submit chapter-14/styling-submit-buttons.html css 
buttons. This example builds input#submit { 
on the one in the previous page, color: #444444; 
and the submit button inherits text-shadow: Opx 1px 1px #ffffff; 
the styles set for the «input» border-bottom: 2px solid #b2b2b2; 
element on the last page. background-color: #b9e4e3; 

background: -webkit-gradient(linear, left top, 
color is used to change the left bottom, from(#beeae9), to(#a8cfce)); 
color of the text on the button. background: 

-moz-linear-gradient(top, #beeae9, #a8cfce); 
text-shadow can give a 3D background: 
look to the text in browsers that -o-linear-gradient(top, #beeae9, #a8cfce); 
support this property. background: 
-ms-linear-gradient(top, ##beeae9, #a8cfce);} 

border-bottom has been used input#submit:hover { 
to make the bottom border of color: #333333; 
the button slightly thicker, which border: 1px solid #a4a4a4; 
gives ita more 3D feel. border-top: 2px solid #b2b2b2; 

background-color: #a0dbc4; 
background-color can make background: -webkit-gradient(linear, left top, 
the submit button stand out left bottom, from(#a8cfce), to(#beeae9)); 
from other items around it. background: 
(Creating a consistent style -moz-linear-gradient(top, #a8cfce, i##beeaed); 
for all buttons helps users background: 
understand how they should -o-linear-gradient(top, #a8cfce, #beeae9); 
interact with the site.) A gradient background: 
background has been added for -ms-linear-gradient(top, #a8cfce, i#beeaed);} 


browsers that support gradients. 
Gradients are covered on 
page 419. 


The :hover pseudo-class 

has been used to change the 
appearance of the button when 
the user hovers over it. In this 
case, the background changes, 
the text gets darker, and the 
thicker border is applied to the 
top of the button. 


Register 
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STYLING FIELDSETS 
& LEGENDS 


fieldset { 
width: 350px; 


border: 1px solid #dcdcdc; 


border-radius: 10px; 

padding: 20px; 

text-align: rights} 
legend { 


background-color: #efefef; 
border: 1px solid #dcdcdc; 


border-radius: 10px; 
padding: 10px 20px; 
text-align: left; 


text-transform: uppercase; } 


NEWSLETTER 


Name: 


Email: 


chapter-14/styling-fieldsets-and-legends.html 


Fieldsets are particularly helpful 
in determining the edges of a 
form. In along form they can 
help group together related 
information within it. 


The legend is used to indicate 
what information is required in 
the fieldset. 


Properties commonly used with 
these two elements include: 


width is used to control 

the width of the fieldset. In 

this example, the width of 

the fieldset forces the form 
elements to wrap onto a new line 
in the correct place. (If it were 
wider, the items might sit on one 
line.) 


color is used to control the 
color of text. 


background-color is used to 
change the color behind these 
items. 


border is used to control the 
appearance of the border around 
the fieldset and/or legend. 


border-radius is used to 
soften the edges of these 
elements in browsers that 
support this property. 


padding can be used to add 
space inside these elements. 
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ALIGNING FORM 
CONTROLS: PROBLEM 


Labels for form elements are -—— 
often different lengths, which chapter-14/aligning-form-controls-problem.html 
means that the form controls will <form action-"example.php" method="post"> 
not appear in a straight line. This <div> 
is demonstrated in the example <label for-"name" class="title">Name:</label> 
on the right (without CSS applied <input type="text" id="name" name="name" /> 
to the form controls). </div> 
<div> 
In this form, each topic we ask <label for="email" class="title">Email:</label> 
the user about is placed inside <input type-"email" id-"email" name-"email" /> 
a <div> element to ensure that </div> 
each question appears on anew <div> 
line. It is easier for users to fill in <span class="title">Gender: </span> 
a form if the form controls are <input type="radio" name="gender" id="male" 
aligned in a straight vertical line. value-"M" /> 
The CSS on the opposite page <label for="male">Male</label> 
addresses this. <input type="radio" name-"gender" id-"female" 
value="F" /> 
If you look at where we ask <label for="female">Female</label><br /> 
users their gender, the two </div> 
radio buttons each have their <div> 
own <label> (one saying male <input type="submit" value-"Register" 
and another saying female). A id-"submit" /> 
<span> element has been added </div> 
to the title which will help align </form> 


these controls. 


On the previous page we saw 
another technique to align form 
elements. When the form only 
contains text inputs, by setting 


T WITHOUT CSS | 


all of the text inputs to be the Name: 

same width, as well as aligning Email: 

all of the form content to the Gender: OMOF 
right, the fields line up and the (Register ) 


labels are in a consistent place. 
For more complex forms, you 
will need a solution more like the 
one shown on these pages. 
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ALIGNING FORM 
CONTROLS: SOLUTION 


Each row of the form has a title 


chapter-14/aligning-form-controls-solution.html telling users what they need to 
div ( enter. For the text inputs, the 
border-bottom: 1px solid #efefef; title is in the «label» element. 
margin: 10px; For the radio buttons, the title is 
padding-bottom: 10px; in a <span> element. Both have 
width: 260px;} a class attribute with a value of 
.title { title. 
float: left; 
width: 100px; We can use a property called 
text-align: right; float to move the titles to the 
padding-right: 10px;} left of the page. (The float 
.radio-buttons label { property is covered in greater 
float: none; } detail on pages 370-376.) 
.submit { 
text-align: rights} By setting the width property 


on those elements, we know that 
the titles will each take up the 
same width. Therefore, the form 
controls next to them will line up. 


The text-align property is 
used to align the titles to the 
right, and padding is used 
to make sure there is a gap 
between the text in the title 
boxes and the form controls. 


Styles are also applied to the 


Name: r^ —.] «div? elements that contain 
each row of the form (fixing 
Email: ^  . their width and creating vertical 
space between each row). The 
Gender OMOF submit button is also aligned to 
the right. 
(Register ) 
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CURSOR STYLES 


cursor 


The cursor property allows 

you to control the type of mouse chapter-14/cursor.html HTML 
cursor that should be displayed <a href="http://www.whitmanarchive.org"™> 

to users. Walt Whitman</a> 


For example, on a form you 

might set the cursor to be a hand 

when the user hovers over it. CSS 
a { 

Here are the most commonly cursor: move; } 


used values for this property: 


auto 

crosshair 

deraut Walt Whitmag. 
pointer 

move 

text 

wait 

help 

ur d SU so. les 


You should only use these values 
to add helpful information for 
users in places they would 

expect to see that cursor. (For 
example, using a crosshair on a 
link might confuse users because 
they are not used to seeing it.) 
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Download this tool from: 
www.chrispederick.com/ 
work/web-developer 


To see the CSS styles and HTML 
structure of a web page, go 

to the CSS menu of the Web 
Developer Toolbar and pick View 
Style Information. 


1: OUTLINES 


When you hover over an 
element, a red outline will be 
drawn around it, showing you 
how much space the element 
takes up. 


o: (ise 34) 
i 


WEB DEVELOPER 
TOOLBAR 


This helpful extension for Firefox and Chrome 
provides tools to show you the CSS styles that 
apply to an element when you hover over it, 
along with the structure of the HTML. 


| 1 line-boight: lipur 
| pepe [line 19) 
| 
colors #4178307 
list-style-image: 
tiek~ loan. png jy 


urit 
list-atyle-position: 
ineldeg 


2: STRUCTURE 


While you are hovering over 
an element, the structure will 
be shown at the top of the 
window. Here you can see the 
<1i> element has a class of 
completed, inside a <ul> with 
a class called to-do. The list 
is inside a «div» element with 
an id of page, and this sits 
inside the «body? and «html» 
elements. 


This can be very helpful when 
writing CSS selectors to help you 
target the right element. 


S CSS STYLES 


When hovering over an element, 
click with your mouse to display 
the CSS. You will be shown the 
rules that apply to that element 
(and the line they are on). Above 
the rules, you can see the name 
of the style sheet (and the path 
to it). 


This helps check which styles 
are being applied to an element. 
You can use it on code for your 
own site or when you want to 
see what styles someone else is 
using on their site. 


This tool also allows you to change the screen size, validate your HTML and CSS code, and turn off images. 
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@ Safari File Edit View History Bookmarks Develop Window Help 


Lists, Tables and Forms 


www. himliandessbook.com/code/chapter-14/example.htm! 


Poetry Workshops 


We will be conducting a number of poetry workshops and symposiums throughout the year 
Please note that the following events are free to members: 


Q A Poetic Perspective 
© Walt Whitman at War 


O Found Poems and Outsider Poetry 


at, 3 Mar 2 Sat 


A Poetic Perspective 11am - 2p a 11am 


Sat, 7 Apr 2012 Sat, 5 May 20 Sat, 19 May 2012 
Wait Whitman at War r io; a May 
itam - 1pm yf 11am - 1pm 


Sat, 9 Jun 2012 Sat, 7 Jul 2012 Sat, 21 Jul 2012 


Found Poems & Outsider Poetry Tap. Sons 11am - 2pm 11am - 2pm 


Sat, 4 Aug 2012 t, 8S - Sat 


Natural Death: An Exploration Tiam - Aon 4 11am 
ip 11ar 


Register your interest 


Your name 


Your email 


Your closest center: New York »$] 


Are you a member? Yes No 


EXAMPLE 


= E) * Sun1220 Q LISTS, TABLES AND FORMS 


This example demonstrates several of the 
CSS properties we have met in this chapter to 
control the presentation of lists, tables, and 
forms. 


For the list of free poetry events near the start of the page, the bullet 
points are styled with an image. The space between each list item is 
increased using the line-height property. 


For the table, the gaps between cells are removed using the border- 
spacing property. Font size is set for the <td> and «th» elements as 
they do not inherit their size from parent elements. 


The head of the table has a darker background, light text, and a dark 
2-pixel line between it and the table content. Rounded corners on the 
table header are created using the :first-child and :last-child 
pseudo classes (for browsers that support rounded corners). 


Alternate rows of the table have different shading, and texture is added 
with different borders on each side of the cell. 


For the form, the related form controls are put in a <fieldset> element. 
The labels of the form controls on the left also use the float property to 
ensure the form controls are vertically aligned. 


When the text boxes of the form receive focus, or the user hovers over it, 


the background color and border colors change. The submit button has 
also been styled to make it clear where people should submit the form. 


LISTS, TABLES AND FORMS 350 


EXAMPLE 


LISTS, TABLES AND FORMS 


<!DOCTYPE html» 
<html> 
<head> 
<title>Lists, Tables and Forms</title> 
<style type="text/css"> 
body { 
font-family: Arial, Verdana, sans-serif; 
font-size: 90%; 
color: #666; 
background-color: #f8f8f8;} 
du t 
list-style-image: url("images/icon-plus.png"); 
line-height: 1.6em;} 
table { 
border-spacing: Opx;} 
thi, ta 4 
padding: 5px 30px 5px 10px; 
border-spacing: Opx; 
font-size: 90%; 
margin: Opx;} 
th; tu t 
text-align: left; 
background-color: #e0e9f0; 
border-top: 1px solid #f1f8fe; 
border-bottom: 1px solid #cbd2d8; 
border-right: 1px solid #cbd2d8; } 
tr.head th { 
color: #fff; 
background-color: #90b4d6; 
border-bottom: 2px solid #547ca0; 
border-right: 1px solid #749abe; 
border-top: 1px solid #90b4d6; 
text-align: center; 
text-shadow: -1px -1px 1px #666; 
letter-spacing: 0.15em; } 
td. 4 
text-shadow: 1px 1px 1px #fff;} 
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tr.even td, tr.even th ( 
background-color: #e8eff5;} 
tr.head thifirst-child ( 
-webkit-border-top-left-radius: 5px; 
-moz-border-radius-topleft: 5px; 
border-top-left-radius: 5px; } 
tr.head th:last-child { 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topright: 5px; 
border-top-right-radius: 5px; } 
fieldset { 
width: 310px; 
margin-top: 20px; 
border: 1px solid #d6d6d6; 
background-color: #ffffff; 
line-height: 1.6em;} 
legend { 
font-style:italic; 
color: #666666; } 
input[type-"text"] { 
width: 120px; 
border: 1px solid #d6d6d6; 
padding: 2px; 
outline: none; } 
input[type-"text"]:focus, 
input[type-"text"]:hover { 
background-color: #d0e2f0; 
border: 1px solid #999;} 
input[type-"submit"] { 
border: 1px solid #006633; 
background-color: #009966; 
color: #FFFFFF; 
border-radius: 5px; 
padding: 5px; 
margin-top: 10px;} 
input[type-"submit"]:hover { 
border: 1px solid #006633; 
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background-color: #00CC33; 
color: #FFFFFF; 
cursor: pointer; } 
.title { 
float: left; 
width: 160px; 
clear: left;} 
.submit { 
width: 310px; 
text-align: right; } 
</style> 
</head> 
<body> 
<hl>Poetry Workshops</hl> 
<p>We will be conducting a number of poetry workshops 
and symposiums throughout the year.</p> 
<p>Please note that the following events are free to 
members:</p> 
<ul> 
<1i>A Poetic Perspective</1i> 
«li»Walt Whitman at War</1i> 
<1i>Found Poems and Outsider Poetry</1i> 
</ul> 
<table> 
<tr class="head"> 
<th></th> 
<th>New York</th> 
<th>Chicago</th> 
<th>San Francisco</th> 
</tr> 
<tr> 
<th>A Poetic Perspective</th> 
<td>Sat, 4 Feb 2012<br />llam - 2pm</td> 
<td>Sat, 3 Mar 2012<br />llam - 2pm</td> 
<td>Sat, 17 Mar 2012<br />llam - 2pm</td> 
</tr> 
<tr class="even"> 
<th>Walt Whitman at War</th> 
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<td>Sat, 7 Apr 2012<br />llam - lpm</td> 
<td>Sat, 5 May 2012<br />llam - lpm</td> 
<td>Sat, 19 May 2012<br />llam - lpm</td> 
</tr> 
SUE 
<th>Found Poems &amp; Outsider Poetry</th> 
<td>Sat, 9 Jun 2012<br />llam - 2pm</td> 
<td>Sat, 7 Jul 2012<br />llam - 2pm</td> 
<td>Sat, 21 Jul 2012<br /»11am - 2pm</td> 
</tr> 
<tr class="even"> 
<th>Natural Death: An Exploration</th> 
<td>Sat, 4 Aug 2012<br />llam - 4pm</td> 
<td>Sat, 8 Sep 2012<br />llam - 4pm</td> 
<td>Sat, 15 Sep 2012<br />llam - 4pm</td> 
</tr> 
</table> 
<form action-"http://www.example.com/form.php" method="get"> 
<fieldset> 
<legend>Register your interest</legend> 
<p><label class-"title" for="name">Your name:</label> 
<input type="text" name="name" id="name"><br /> 
<label class-"title" for="email">Your email:</label> 
<input type="text" name-"email" id="email"></p> 
<p><label for-"location" class-"title"»Your closest center:</label> 
<select name-"location" id="location"> 
<option value="ny">New York</option> 
<option value="il">Chicago</option> 
<option value="ca">San Francisco</option> 
</select></p> 
<span class="title">Are you a member?</span> 
<label><input type="radio" name-"member" value-"yes" /> Yes</label> 
<label><input type="radio" name-"member" value-"no" /> No</label></p> 
</fieldset> 
<div class="submit"><input type="submit" value-"Register" /></div> 
</form> 
</body> 
</html> 
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In addition to the CSS properties covered in other 
chapters which work with the contents of all elements, 
there are several others that are specifically used to 
control the appearance of lists, tables, and forms. 


List markers can be given different appearances 
using the list-style-type and list-style image 
properties. 


Table cells can have different borders and spacing in 
different browsers, but there are properties you can 
use to control them and make them more consistent. 


Forms are easier to use if the form controls are 
vertically aligned using CSS. 


Forms benefit from styles that make them feel more 
interactive. 


LAYOUT 


> Controlling the position of elements 
> Creating site layouts 
> Designing for different sized screens 
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LAYOUT 


In this chapter we are going to look at 
how to control where each element sits 
on a page and how to create attractive 
page layouts. 

This involves learning about how designing for a screen can be 


different to designing for other mediums (such as print). In this 
chapter we will: 


^ Explore different ways to position elements using normal 
flow, relative positioning, absolute positioning and floats. 


Discover how various devices have different screen sizes 
and resolution, and how this affects the design process. 


^ Learn the difference between fixed width and liquid layouts, 
and how they are created. 


^ Findout how designers use grids to make their page 
designs look more professional. 


GÉ Safari file Edit View History Bookmarks Develop Window Help MO 4 = G4 Suni220 Q 


MacBook Pro 
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KEY CONCEPTS IN 
POSITIONING ELEMENTS 


BLOCK-LEVEL ELEMENTS 
START ON A NEW LINE 
Examples include: 

<hl> <p> <ul> «li» 


INLINE ELEMENTS 
FLOW IN BETWEEN 
SURROUNDING TEXT 
Examples include: 

<img> <b> <i> 
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BUILDING BLOCKS 


CSS treats each HTML element as if it is in its 
own box. This box will either be a block-level 
box or an inline box. 


Block-level boxes start on a new line and act as the main building blocks 
of any layout, while inline boxes flow between surrounding text. You can 
control how much space each box takes up by setting the width of the 
boxes (and sometimes the height, too). To separate boxes, you can use 
borders, margins, padding, and background colors. 


Lorem Ipsum | 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit. 


* Lorem ipsum dolor sit 
* Consectetur adipisicing 
* Elit, sed do eiusmod 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate 


velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 

sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. 


CONTAINING ELEMENTS 


If one block-level element sits inside another 
block-level element then the outer box is 
known as the containing or parent element. 


It is common to group a number of elements together inside a <div> 
(or other block-level) element. For example, you might group together 
all of the elements that form the header of a site (such as the logo and 
the main navigation). The <div> element that contains this group of 
elements is then referred to as the containing element. 


A box may be nested inside 
several other block-level 
elements. The containing 
element is always the direct 
parent of that element. 


Lorem * Ipsum * Dolor * Consectetur 


Lorem Ipsum 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute. 


The orange lines in this diagram represent <div> elements. The 
header (containing the logo and navigation) are in one <div> element, 
the main content of the page is in another, and the footer is in a third. 
The <body> element is the containing element for these three <div> 
elements. The second <div> element is the containing element for two 
paragraphs of Latin text and images (represented by crossed squares). 
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CONTROLLING THE 


POSITION OF ELEMENTS 


CSS has the following positioning schemes that allow you to control 
the layout of a page: normal flow, relative positioning, and absolute 
positioning. You specify the positioning scheme using the position 
property in CSS. You can also float elements using the float property. 


NORMAL FLOW 

Every block-level element 
appears on a new line, causing 
each item to appear lower down 
the page than the previous one. 
Even if you specify the width 

of the boxes and there is space 
for two elements to sit side-by- 
side, they will not appear next 
to each other. This is the default 
behavior (unless you tell the 
browser to do something else). 


Lorem Ipsum 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et 
dolore magna aliqua. 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit 
in voluptate velit. 


The paragraphs appear one 
after the other, vertically down 
the page. 


See page 365 
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RELATIVE POSITIONING 
This moves an element from the 
position it would be in normal 
flow, shifting it to the top, right, 
bottom, or left of where it 
would have been placed. This 
does not affect the position of 
surrounding elements; they stay 
in the position they would be in 
in normal flow. 


Lorem Ipsum 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut. 


Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea. 
Duis aute irure dolor in reprehenderit 
in voluptate velit. 


The second paragraph has been 
pushed down and right from 
where it would otherwise have 
been in normal flow. 


See page 366 


ABSOLUTE POSITIONING 
This positions the element 

in relation to its containing 
element. It is taken out of 
normal flow, meaning that it 
does not affect the position 

of any surrounding elements 
(as they simply ignore the 
space it would have taken up). 
Absolutely positioned elements 
move as users scroll up and 
down the page. 


Lorem ipsum dold Lorem Ipsum 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et 
dolore magna aliqua. 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit 
in voluptate velit. 


The heading is positioned to the 
top right, and the paragraphs 
start at the top of the screen (as 
if the heading were not there). 


See page 367 


To indicate where a box should be positioned, you may also need to use 
box offset properties to tell the browser how far from the top or bottom 
and left or right it should be placed. (You will meet these when we 
introduce the positioning schemes on the following pages.) 


FIXED POSITIONING 

This is a form of absolute 
positioning that positions 

the element in relation to the 
browser window, as opposed 
to the containing element. 
Elements with fixed positioning 
do not affect the position of 
surrounding elements and they 
do not move when the user 
scrolls up or down the page. 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmo: bore et 


WWE Lorem Ipsum 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit 
in voluptate velit. 


The heading has been placed in 
the center of the page and 2596 
from the top of the screen. (The 
rest appears in normal flow.) 


See page 368 


FLOATING ELEMENTS 
Floating an element allows 
you to take that element out 

of normal flow and position 

it to the far left or right of a 
containing box. The floated 
element becomes a block-level 
element around which other 
content can flow. 


Lorem Lorem ipsum dolor sit 

amet, consectetur 
Ipsum adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et 
dolore magna aliqua. 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit 
in voluptate velit. 


The heading has been floated to 
the left, allowing the paragraphs 
of text to flow around it. 


See page 370-376 


When you move 
any element from 
normal flow, boxes 
can overlap. The 
z-index property 
allows you to control 
which box appears 
on top. 
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NORMAL FLOW 


position:static 


ede Cpteritnsrss- In 
one. Since this is the default <body> 

way in which browsers treat <hl>The Evolution of the Bicycle</hl1> 

HTML elements, you do not <p>In 1817 Baron von Drais invented a walking 
need a CSS property to indicate machine that would help him get around the 

that elements should appear royal gardens faster...</p> 

in normal flow, but the syntax </body> 

would be: 


position: static; 


css 

| have not specified a width body ( 
property for the heading width: 750px; 
element, so you can see how it font-family: Arial, Verdana, sans-serif; 
stretches the width of the entire color: #665544; } 
browser window by default. hl { 

background-color: #efefef; 
The paragraphs are restricted padding: 10px;} 
to 450 pixels wide. This shows pi 
how the elements in normal flow width: 450px;} 


start on a new line even if they 
do not take up the full width of 
the browser window. 


Met epee ihe. The Evolution of the Bicycle 


demonstrate positioning WI I use In 1817 Baron von Drais invented a walking machine that 
ETT would help him get around the royal gardens faster: two same- 
a similar HTML structure. size in-line wheels, the front one steerable, mounted in a frame 


upon which you straddled. The device was propelled by 
pushing your feet against the ground, thus rolling yourself and 
the device forward in a sort of gliding walk. 


The machine became known as the Draisienne (or "hobby 
horse"). It was made entirely of wood. This enjoyed a short 
lived popularity as a fad, not being practical for transportation in 
any other place than a well maintained pathway such as in a 
park or garden. 


The next appearance of a two-wheeled riding machine was in 
1865, when pedals were applied directly to the front wheel 
This machine was known as the velocipede (meaning "fast 
foot") as well as the "bone shaker," since it's wooden structure 
combined with the cobblestone roads of the day made for an 
extremely uncomfortable ride. They also became a fad and 
indoor riding academies, similar to roller rinks, could be found 
in large cities. 
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RELATIVE POSITIONING 


position:relative 


Relative positioning moves an 
element in relation to where it 
would have been in normal flow. 


chapter-15/position-relative.html 


<body> 

<hl>The Evolution of the Bicycle</hl> 

<p>In 1817 Baron von Drais invented a walking For example, you can move it 10 
pixels lower than it would have 


been in normal flow or 20% to 


machine that would help him get around the 
royal gardens faster...</p> 


</body> the right. 
You can indicate that an element 
should be relatively positioned 
css 


using the position property 
p.example { with a value of relative. 
position: relative; 
top: 10px; 

left: 100px; } 


You then use the offset 
properties (top or bottom and 
left or right) to indicate how 
far to move the element from 
where it would have been in 
normal flow. 


To move the box up or down, 
you can use either the top or 
bottom properties. 


The Evolution of the Bicycle 


In 1817 Baron von Drais invented a walking machine that 
would help him get around the royal gardens faster: two same- 
size in-line wheels, the front one steerable, mounted in a frame 
upon which you straddled. The device was propelled by 
pushing your feet against the ground, thus rolling yourself and 
the device forward in a sort of gliding walk 


The machine became known as the Draisienne (or "hobby 
horse"), It was made entirely of wood. This enjoyed a short 
lived popularity as a fad, not being practical for transportation ir 
any other place than a well maintained pathway such as in a 
park or garden. 

The next appearance of a two-wheeled riding machine was in 

1865, when pedals were applied directly to the front wheel. 

This machine was known as the velocipede (meaning "fast 

foot") as well as the "bone shaker," since il's wooden structure 

combined with the cobblestone roads of the day made for an 

extremely uncomfortable ride. They also became a fad and 

indoor riding academies, similar to roller rinks, could be found 

in large cities. 


To move the box horizontally, 
you can use either the left or 
right properties. 


The values of the box offset 


properties are usually given in 
pixels, percentages or ems. 
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ABSOLUTE POSITIONING 


position:absolute 


When the position property 
is given a value of absolute, 
the box is taken out of normal 
flow and no longer affects the 
position of other elements on 
the page. (They act like it is not 
there.) 


The box offset properties (top 
or bottom and left or right) 
specify where the element 
should appear in relation to its 
containing element. 


In this example, the heading has 

been positioned at the top of the 
page and 500 pixels from its left 
edge. The width of the heading is 
set to be 250 pixels wide. 


The width property has 
also been applied to the «p» 
elements in this example 

to prevent the text from 
overlapping and becoming 
unreadable. 


By default, most browsers add 

a margin to the top of the <h1> 
element. This is why there is 

a gap between the top of the 
browser and the box containing 
the <h1> element. If you wanted 
to remove this margin, you could 
add the following code to the 
<h1> element's style rules: 
margin: Opx; 
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chapter-15/position-absolute.html HTML 


<body> 
<hl>The Evolution of the Bicycle</hl1> 
<p>In 1817 Baron von Drais invented a walking 
machine that would help him get around the 
royal gardens faster...</p> 


</body> 
css 

hl { 

position: absolute; 

top: Opx; 

left: 500px; 

width: 250px;} 
p { 


width: 450px;} 


| WOUId neip him get arou e royal gardens e- B VU LU U 
size in-line wheels, the front one steerable, mounted in a frame . 

| upon which you straddled. The device was propelled by of the Bicycle 

| pushing your feet against the ground, thus rolling yourself and 

| the device forward in a sort of gliding walk. 


| The machine became known as the Draisienne (or "hobby 

| horse"). It was made entirely of wood. This enjoyed a short lived 
popularity as a fad, not being practical for transportation in any 

| ether place than a well maintained pathway such as in a park or 

| garden. 


| The next appearance of a two-wheeled riding machine was in 
| 1865, when pedals were applied directly to the front wheel. This 
machine was known as the velocipede (meaning "fast foot") as 
| well as the "bone shaker," since it's wooden structure combined 
| with the cobblestone roads of the day made for an extremely 
uncomfortable ride. They also became a fad and indoor riding 
| academies, similar to roller rinks, could be found in large cities. 


In 1870 the first all-metal machine appeared. (Prior to this, 


FIXED POSITIONING 


position:fixed 


-— s Fixed positioning is a type 
chapter-15/position-fixed.html of absolute positioning that 
<body> requires the position property 
<hl>The Evolution of the Bicycle</h1> to have a value of fixed. 
<p class="example">In 1817 Baron von Drais 
invented a walking machine that would help him It positions the element in 
get around the royal gardens faster...</p> relation to the browser window. 
</body> Therefore, when a user scrolls 


down the page, it stays in the 
exact same place. It is a good 


idea to try this example in your 
browser to see the effect. 


hl { 
position: fixed; To control where the fixed 
top: Opx; position box appears in relation 
left: 50px; to the browser window, the box 
padding: 10px; offset properties are used. 
margin: Opx; 
width: 100%; In this example, the heading 
background-color: #efefef; } has been positioned to the top 
p.example { left hand corner of the browser 
margin-top: 100px;} window. When the user scrolls 


down the page, the paragraphs 
disappear behind the heading. 


RESULT ! 
wer | The <p> elements are in normal 
DOO o ——— flow and ignore the Space that 
The Evolution of the Bicycle the <h1> element would have 
| shaker” since ifa wooden structure combined with the cobblestone roads of the day madeloran — taken up. Therefore, the 
extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, 5 
| could be found in large cities. margin-top property has 
| In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide been used to push the first <p> 
metal which was strong enough to make small, light parts out of.) The pedals were atttached directly to the 5 
front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front element below where the fixed 
wheel provided a much smoother ride than its predecessor. cee % UN 
position <h1> element is sitting. 
The front wheels became larger and larger as makers realized that the larger the wheel, the farther you 
| could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your 
| leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles 
enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker 


| Six month's pay.) 

| 

| Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rutin * 
the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the " 


| idae aiiis hia Lennon hires iiadasiha handiahain minadi ——— hia haad Thua iha 
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OVERLAPPING ELEMENTS 


z-index 


When you use relative, fixed, or 
absolute positioning, boxes can 
overlap. If boxes do overlap, the 
elements that appear later in the 
HTML code sit on top of those 
that are earlier in the page. 


If you want to control which 
element sits on top, you can use 
the z-index property. Its value 
is anumber, and the higher the 
number the closer that element 
is to the front. For example, an 
element with a z-index of 10 
will appear over the top of one 
with a z-index of 5. 


This example looks similar to 
the one on page 368, but it 
uses relative positioning for 

the <p> elements. Because 

the paragraphs are relatively 
positioned, by default they 
would appear over the top of the 
heading as the user scrolls down 
the page. To ensure that the 
<h1> element stays on top, we 
use the z-index property on the 
rule for the <h1> element. 


The z-index is sometimes 
referred to as the stacking 
context (as if the blocks have 
been stacked on top of each 
other on az axis). If you are 
familiar with desktop publishing 
packages, it is the equivalent 
of using the ‘bring to front’ and 
‘send to back' features 
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chapter-15/z-index.html 


hl { 


position: 
top: 


fixed; 
Opx; 


left: Opx; 
margin: Opx; 


padding: 
width: 
background-color: 
z-index: 


pt 


position: 


10px; 

100%; 

#tefefef; 
10;} 


relative; 


top: 70px; 


left: 


| The 


The 


70px; } 


css 


RESULT WITHOUT Z-INDEX 


as 
deje zie tek 
and indoor riding academies, similar to roller rinks, 
could be found in large cities. 


In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide 
meta! which was strong enough to make smail, light parts out of.) The pedals were atttached directly to the 
front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front 
wheel provided a much smoother ride than its predecessor. 


The front wheels became larger and larger as makers realized that the larger the wheel, the farther you 
could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your 
leg length would allow. This machine was the first one to be called a bicycie ("two wheel"). These bicycles 
enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker 
six month's pay.) 
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RESULT WITH Z-INDEX 
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n (GAL appum ui a IWU-WI RETO HI HGLAMI Was HI ouu, wi perudia wos dplpieu uli cuey t) 
the front wheel. "This machine was known as the velocipede (meaning “fest foot") es well as tha "bona 
shaker,” since it's wooden structure combined with the cobblestone roads of the day made for an 

extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, 
could be found in large cities. 


In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was nat advanced enough to provide 

metal which was strong enough to make small, light parts out of.) The pedals ware atttached directly to the 

front wheel with no freewheeling mechanism, Solid rubber tires and the long spokes of the large front 
Wai prowidgts sec DAGO Bde tran Its predecessor. 


The front wheels became larger and larger as makers realized that the larger the wheel, the farther you 
could travel with one rotation of the pedals. For that reason, YOU wouid purchase à vives! $6 Lv a0 Your 
lan lennih unir allaw Thie machina wae the Bret ane in ha rallar a hirurla ("hun uhaal"! Thoen hiruriae 


FLOATING ELEMENTS 


HTML chapter-15/float.html 


<hl>The Evolution of the Bicycle</h1> 
<blockquote>"Life is like riding a bicycle. 
To keep your balance you must keep moving." 
Albert Einstein</blockquote> 
<p>In 1817 Baron von Drais invented a walking 
machine that would help him get around the royal 


gardens faster: two same-size in-line wheels, the 


front one steerable, mounted in a frame ... </p> 


blockquote ( 
float: right; 
width: 275px; 
font-size: 130%; 
font-style: italic; 
font-family: Georgia, Times, serif; 
margin: Opx Opx 10px 10px; 
padding: 10px; 
border-top: 1px solid #665544; 
border-bottom: 1px solid #665544; } 


The Evolution of the Bicycle 


In 1817 Baron von Drais invented a walking machine that ean a 2 . 

would help him get around the royal gardens faster: two same- "Life is like riding a bicycle. 
size in-line wheels, the front one steerable, mounted in a To keep your balance you 
frame upon which you straddied. The device was propelled by p " 

pushing your feet against the ground, thus rolling yourself and must keep moumg. Albert 
the device forward in a sort of gliding walk Einstein 


The machine became known as Ihe Draisienne (or "hobby 
horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical 
for transportation In any other place than a well maintained pathway such as in a park or garden. 


The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to 
the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone 
shaker," since Il's wooden structure combined with the cobblestone roads of the day made for an 
extremely uncomfortable ride, They also became a fad and indoor riding academies, similar to roller rinks, 
could be found in large cities, 


float 


The float property allows you 
to take an element in normal 
flow and place it as far to the 
left or right of the containing 
element as possible. 


Anything else that sits inside 
the containing element will 
flow around the element that is 
floated. 


When you use the float 
property, you should also use the 
width property to indicate how 
wide the floated element should 
be. If you do not, results can be 
inconsistent but the box is likely 
to take up the full width of the 
containing element (just like it 
would in normal flow). 


In this example, a 
<blockquote> element is 
used to hold a quotation. It's 
containing element is the 
<body> element. 


The <blockquote> element 
is floated to the right, and the 
paragraphs that follow the quote 
flow around the floated element. 
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USING FLOAT TO PLACE 
ELEMENTS SIDE-BY-SIDE 


next toeachother TheTloat Shapter-15/using-Float heat 
property is commonly used to <body> 
achieve this. <hl>The Evolution of the Bicycle</h1> 

<p>In 1817 Baron von Drais invented a walking 
When elements are floated, the machine that would help him get around...</p> 
height of the boxes can affect </body> 


where the following elements sit. 


In this example, you can see six 
paragraphs, each of which has a 


CSS 


width anda float property set. body ( 
width: 750px; 
The fourth paragraph does not font-family: Arial, Verdana, sans-serif; 
go across to the left hand edge color: #665544; } 
of the page as one might expect. pt 
Rather it sits right under the width: 230px; 
third paragraph. float: left; 
margin: 5px; 
The reason for this is that the padding: 5px; 
fourth paragraph has space to background-color: #efefef;} 


start under the third paragraph, 
but it cannot go any further to 
the left because the second 
paragraph is in the way. 


Setting the height of the 
paragraphs to be the same The Evolution of the Bicycle 
height as the tallest paragraph 


PR Pe In 1817 Baron von Drais The device know as the It was not seen a suitable for 
would solve th ISUSSUG? but it invented a walking machine that — Draisienne (or "hobby horse") any place other than a well 
2 - would help him get around the was made of wood, and maintained pathway. 
is rarely suited to real world royal gardens faster. propelled by pushing your feed 
i on Ihe ground in a gliding In 1865, the velocipede 
designs where the amount of movement, (meaning "fast foot”) attached 
5 pedals to the front wheel, but its 
text in a paragraph or column wooden structure made it 
z extremely uncomfortable. 
may vary. It is more common 
In 1870 the first all-metal Solid rubber tires and the long 
to use the clear property machine appeared. The pedals spokes of the large front wheel 
" were atttached directly to the provided a much smoother ride 
(discussed on the next page) to front wheel than its predecessor. 


solve this issue. 
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CLEARING FLOATS 


clear 


The clear property allows you 
chapters leveleer in to say that no element (within 
<p class="clear">In 1865, the velocipede (meaning the same containing element) 
"fast foot") attached pedals to the front wheel, should touch the left or right- 
but its wooden structure made it extremely hand sides of a box. It can take 
uncomfortable.</p> the following values: 


left 

The left-hand side of the box 
should not touch any other 
elements appearing in the same 


bod 
TE containing element. 


width: 750px; 
font-family: Arial, Verdana, sans-serif; 


color: 4(665544;] right 

p { The right-hand side of the 
width: 230px; box will not touch elements 
float: left; appearing in the same containing 
margin: 5px; element. 
padding: 5px; 
background-color: #efefef;} 

.Clear { both 


Neither the left nor right-hand 
sides of the box will touch 
elements appearing in the same 
containing element. 


clear: left;} 


iH none 


Evolution of the Bicycle Elements can touch either side. 
In 1817 Baron von Drais The device know as the It was not seen a suitable for 7 
invented a walking machine that — Draisienne (or "hobby horse") any place other than a well In this example, the fourth 
wouki help him get around the was made of wood, and maintained pathway. 
royal gardens faster. propelled by pushing your feed pa ragraph has a class called 
on the ground in a gliding , 
movement clear. The CSS rule for this 
In 1865, the velocipede In 1870 the first all-metal Solid rubber lires and the long class uses the clear property 
(meaning "fast foot") attached machine appeared. The pedals spokes of the large front wheel 2 x 3 
pedals to the front wheel, but its were atttached directly to the provided a much smoother ride to indicate that nothing should 
wooden structure made it front wheel than its predecessor. H 7 
extremely uncomfortable touch the left-hand side of it. The 


fourth paragraph is therefore 
moved further down the page 
so no other element touches its 
left-hand side. 
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PARENIS OF FLOATED 


ELEMENTS: PROBLEM 


If a containing element only 
contains floated elements, some 
browsers will treat it as if it is 
zero pixels tall. 


As you can see in this example, 
the one pixel border assigned 

to the containing element has 
collapsed, so the box looks like a 
two pixel line. 
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chapter-15/float-problem.html 


<body> 


<hl>The Evolution of the Bicycle</h1> 


<div> 


<p>In 1817 Baron von Drais invented a walking 
machine that would help him get around the 


royal gardens faster...</p> 


</div> 
</body> 


div { 


border: 1px solid #665544; } 


The Evolution of the Bicycle 


In 1817 Baron von Drais 
invented a walking machine that 
would help him get around the 
royal gardens faster. 


In 1865, the velocipede 
(meaning “fast foot") attached 
pedals to the front wheel, but its 
wooden structure made it 
extremely uncomfortable, 


The device know as the 
Draisienne (or "hobby horse") 
was made of wood, and 
propelled by pushing your feed 
on the ground in a gliding 
movement. 


In 1870 the first all-metal 
machine appeared. The pedals 
were attached directly to the 
front wheel 


CSS 


It was not seen a suitable for 
any place other than a well 
maintained pathway 


Solid rubber tires and the long 
spokes of the large front wheel 
provided a much smoother ride 
than ils predecessor. 


PARENTS OF FLOATED 
ELEMENTS: SOLUTION 


' Traditionally, developers got 
chapter-15/float-solution.html around this problem by adding 
<body> an extra element after the 

<hl>The Evolution of the Bicycle</h1> last floated box (inside the 
<div> containing element). A CSS 
<p>In 1817 Baron von Drais invented a walking rule would be applied to this 
machine that would help him get around the additional element setting the 
royal gardens faster...</p> clear property to have a value 
</div> of both. But this meant that an 
</body> extra element was added to the 


HTML just to fix the height of the 
containing element. 


More recently, developers have 
div { opted for a purely CSS-based 
border: 1px solid #665544; solution because it means that 
overflow: auto; there is no need to add an extra 
width: 100%; } element to the HTML page after 


the floated elements. The pure 
CSS solution adds two CSS rules 
to the containing element (in this 
example the «div» element): 


The Evolution of the Bicycle 


® The overflow property is 


In 1817 Baron von Drais The device know as the It was not seen a suitable for given a value auto. 
invented a walking machine that — Draisienne (or "hobby horse") any place other than a well 
would help him get around the was made of wood, and maintained pathway. , 
royal gardens faster. propelled by pushing your feed ® Thewidth property is set to 
on the ground in a gliding 
movement 100%. 
In 1865, the velocipede In 1870 the first all-metal Solid rubber tires and the long 
(meaning “fast foot") attached machine appeared. The pedals spokes of the large front wheel 
pedals to the front wheel, but its were atttached directly to the provided a much smoother ride 
wooden structure made it front wheel than its predecessor. 
extremely uncomfortable 


LAYOUT 374 


CREATING MULTI-COLUMN 
LAYOUTS WITH FLOATS 


Many web pages use multiple 
columns in their design. This 

is achieved by using a «div» 
element to represent each 
column. The following three CSS 
properties are used to position 
the columns next to each other: 


chapter-15/columns-two.html 


<hl>The Evolution of the Bicycle</h1> 
<div class="columnlof2"> 
<h3>The First Bicycle</h3> 
<p>In 1817 Baron von Drais invented a walking 
machine that would help him get around the 
royal gardens faster: two same-size ...</p> 
</div> 
<div class="column2of2"> 
<h3>Bicycle Timeline</h3> ... 
</div> 


width 
This sets the width of the 
columns. 


float 


This positions the columns next 


to each other. CSS 


.columnlof2 ( 


: float: left; 
margin a 
. width: 620px; 
This creates a gap between the i 
margin: 10px;} 
columns. 


.column2of2 { 
float: left; 
width: 300px; 
margin: 10px;] 


A two-column layout like the one 
shown on this page would need 
two <div> elements, one for the 
main content of the page and 

one for the sidebar. 


Inside each of the «div» 
elements there can be headings, 
paragraphs, images, and even 
other <div> elements. 


The Evolution of the Bicycle 


The First Bicycle 


In 1817 Baron von Drais invented a walking machine that would help him get around 
the royal gardens faster two same-size in-hne wheels, the front one steerable 
mounted in a frame upon which you straddied. The device was propelled by pushing 
your feet against the ground. thus rolling yourself and the device forward in a sort of 


Bicycle Timeline 


* 1817: Draisienna 
* 1865: Velocipede 
* 1870; High-wheel bicycle. 
* 1876: High-wheel safety 


gliding wask * 1885: Hard-tred safety 
* 1888: Pneumatic saféty 

The machine became known as the Draissenne (or "hobby horse") it was made entirely 

Of wood. This enjoyed à short lived poputarily as a fad, not being practical for 

transportation in any other place than a well maintained pathway such as in a park or 

garden 


Further Innovations 


The next appearance of a two-wheeled riding machine was in 1865, when pedals wore 
applied directly to the front wheel. This machine was known as the velocipede 
(meaning "tas! foot") as wel as the “bone shaker.” since it's wooden structure 
combined with Ihe cobblestone roads of the day made for an extremely uncomfortable 
ride. They aiso became a fad and indoor riding academies, simiar to roller rinks, could 
be found in large cities. 


bh 1870 the first all-metal machine appeured. (Prior to this, metallurgy was not 
advanced enough to provide metal which was sirong enough to make small, gh! parts 
Out of.) The pedals were attached directly to the front wheel with no 

mechanism. Solid rubber tires and the long spokes of the large front wheel provided a 
much smoother ride than its predecessor 
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Similarly, a three column layout 
could be created by floating 
three «div» elements next to 
each other, as shown on this 


page. 


<hl>The Evolution of the Bicycle</h1> 
<div class="columnlof3"> 

<h3>The First Bicycle</h3> ... 
</div> 
«div class="column2of3"> 

<h3>Further Innovations</h3> ... 
</div> 
«div class="column30f3"> 

<h3>Bicycle Timeline</h3> ... 
</div> 


chapter-15/columns-three.html 


The Evolution of the Bicycle 


The First Bicycle Further innovations Bicycle Timeline 


in 1817 Baron von Drais invented a 
walking machine that would help him get 
afound the royal gardens faster. two 
tamo-size in-line Wheels, the front one 
steerable, mounted in a frame upon which 
you straddled. The device was propelied 
by pushing your feet against the ground. 
thus rolling yourself and the device 
forward in a sort of gliding walk 


The machine became known as Ihe 
Oraisienne (or "hobby horse"). It was 
made entirely of wood. This enjoyed a 
short lived popularity as a lad. not being 
practical for transportation in any other 
place than a well maintained pathway 
such as in a park or garden 


The next appearance of a two-wheoied 
riding machine was in 1855. when pedals 
were applied directly to the front wheel 
This machine was known as the 
velocpede (meaning "fast foot) as well as 
Ihe "bone shaker." since ifs wooden 
structure combined with the cobblestone 
roads of the day made for an extremely 
uncomfortable ride. They also became a 
fad and indoor riding academies, similar 
to roller rinks, could be found in large 
cues 


In 1870 the first adi -motal machine 
appeared. (Prior to this. metafturgy was 
not advanced enough lo provide metal 
which was sirong enough to make small 
light parts out of.) The padais were 
attached directly to the front wheel with no 
freewheeling mechanism Solid rubber 
ties and the long spokes of the targe 
front wheel provided a much smoother 
ride than its predecessor 


1817: Draisienna 
1865: Velocipede 
1870: High-wheel bicycle 
1876: High-wheel safety 
1885: Hard-tred safety 
1888: Pneumatic safety 
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SCREEN SIZES 


Different visitors to your site will have different sized screens that show 
different amounts of information, so your design needs to be able to 
work on a range of different sized screens. 


iPhone 4 


Size: 3.5 inches 
Resolution: 960 x 640 pixels 


When designing for print, you 
always know the size of the 
piece of paper that your design 
will be printed on. However, 
when it comes to designing for 
the web, you are faced with the 
unique challenge that different 
users will have different sized 
screens. 


(377) LAYOUT 


Since computers have been sold 
to the public, the size of screens 
has been steadily increasing. 
This means that some people 
viewing your site might have 13 
inch monitors while others may 
have 27+ inch monitors. 


iPad 2 
Size: 9.7 inches 


Resolution: 1024 x 768 pixels 


The size of a user's screen 
affects how big they can open 
their windows and how much 
of the page they will see. There 
are also an increasing number 
of handheld devices (mobile 
phones and tablets) that have 
smaller screens. 


SCREEN RESOLUTION 


Resolution refers to the number of dots a screen shows per inch. Some 
devices have a higher resolution than desktop computers and most 
operating systems allow users to adjust the resolution of their screens. 


13" MacBook 27" iMac 
Size: 13.3 inches Size: 27 inches 
Resolution: 1280 x 800 pixels Resolution: 2560 x 1440 pixels 


Most computers will allow It is interesting to note that 
Pee Ae owners to adjust the resolution the higher the resolution, the 
720 x 480 of the display or the number smaller the text appears. Many 
720 x 480 (stretched) a 3 5 
800 x 500 of pixels that are shown on the mobile devices have screens 
800 x 600 . H 
doo sea em screen. For example, here you that are higher resolution than 
1024 x 640 can see the options to change their desktop counterparts. 
1024 x 768 j 
1024 x 768 (stretched) the screen size from 720 x 480 


1152 x 720 


pixels up to 1280 x 800 pixels. 
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PAGE SIZES 


Because screen sizes and display resolutions vary so much, web 
designers often try to create pages of around 960-1000 pixels wide 
(since most users will be able to see designs this wide on their screens). 


(379) LAYOUT 


Judging the height that people 
are likely to see on the screen 
without scrolling down the page 
is much harder. For several 
years, designers assumed that 
users would see the top 570- 
600 pixels of a page without 
having to scroll and some tried 
to fit all of the key messages in 
this area (fearing that people 
would not scroll down the page). 


As screen sizes have increased 
and handheld devices have 
become more popular, the 
area users will see is far more 
variable. 


The area of the page that users 
would see without scrolling was 
often referred as being "above 
the fold" (a term newspapers 
had originally coined to describe 


the area of the front page you 
would see if the paper were 
folded in half). 


It is now recognized that if 
someone is interested in the 
content of the page, they are 
likely to scroll down to see more. 
Having said which, usability 
studies have shown that visitors 
can judge a page in under a 
second so it is still important to 
let new visitors know that the 
site is relevant to them and their 
interests. 


As aresult, many designs still 
try to let the user know what the 
site is about within the top 570- 
600 pixels, as well as hint at 
more content below this point. 
But do not try to cram too much 
into that top area. 


At the time of writing, there was a growing trend for people to create 


adaptive or responsive designs that could change depending on the size 


of the screen. 


The shaded area is hidden by However, the user gets a taste 


the constraints of the browser for what is lower on the page 
window, so the user must scroll and can tell that there will be 
in order to view the lower region. more to see if they scroll down. 
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or login with your ID: *8j 


Upload Discover Share 


More ways to get your photos online. See what's going on in your world. Your photos are everywhere you are. 


Keep up with your friends and share you Jpload your phot 
ibrougl: Web.-youcoobile dece. ello SLOD ES will. commeble d. Dole. Add. ach. an y share them through Facebook, 


your favorite photo applications information like tags, locations & people. Twitter, email, blogs and more 


Sign up n N It takes less than a minute to create your free account & start sha 


Have a Google or Facebook account? You can use them to sign in! 


Community Privacy Flickr on the go 
Flickr is made of people. Your photos are safe with us. Mobile options to keep you going. 
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Join one of over 10 million active groups to Share photos only with the people you want to Flickr is always in your back pocket with apps 
take part in the conversation, learn from our with our easy privacy settings. Flickrs multiple- for IPhone, Windows 7, and more. Or use 
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FIXED WIDTH LAYOUTS 


Fixed width layout 
designs do not 
change size as the 
user increases 

or decreases 

the size of their 
browser window. 
Measurements tend 
to be given in pixels. 


o LAYOUT 


Lorem Ipsum 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat. 


Lorem ipsum dolor 
sit amet, consectetur 
adipisicing elit, sed 
do eiusmod tempor 
incididunt ut labore et 


* |psum * Dolor * Consectetur 


ADVANTAGES 


Pixel values are accurate 
at controlling size and 
positioning of elements. 


The designer has far greater 
control over the appearance 
and position of items on the 


page than with liquid layouts. 


You can control the lengths 
of lines of text regardless of 


the size of the user's window. 


The size of an image will 
always remain the same 
relative to the rest of the 


page. 


DISADVANTAGES 


You can end up with big gaps 
around the edge of a page. 


If the user's screen is a much 
higher resolution than the 
designer's screen, the page 
can look smaller and text can 
be harder to read. 


If a user increases font sizes, 
text might not fit into the 
allotted spaces. 


The design works best on 
devices that have a site or 
resolution similar to that of 
desktop or laptop computers. 


The page will often take up 
more vertical space than a 
liquid layout with the same 
content. 


ADVANTAGES 


Lorem Ipsum 


LIQUID LAYOUTS 


Lorem * Ipsum * Dolor * Consectetur 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. 


Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 


DISADVANTAGES 


Pages expand to fill the entire € |f you do not control the 
browser window so there are width of sections of the page 


no spaces around the page 
on a large screen. 


€ |ftheuser has a small 
window, the page can 
contract to fit it without the 
user having to scroll to the 
side. 


€ The design is tolerant of 
users setting font sizes larger 
than the designer intended 
(because the page can 
stretch). 


then the design can look very 
different than you intended, 
with unexpected gaps around 
certain elements or items 
squashed together. 


€ |fthe user has a wide 
window, lines of text can 
become very long, which 
makes them harder to read. 


€ Ifthe user has a very narrow 
window, words may be 
squashed and you can end up 
with few words on each line. 


€ |fa fixed width item (such as 
an image) is in a box that is 
too small to hold it (because 
the user has made the 
window smaller) the image 
can overflow over the text. 


Liquid layout designs 
stretch and contract 
as the user increases 
or decreases the 

size of their browser 
window. They tend to 
use percentages. 


Because liquid layouts can 
stretch the entire width of the 
browser, resulting in long lines 
of text that are hard to read, 
some liquid layouts only let part 
of the page expand and contract. 
Other parts of the page have 
minimum and maximum widths. 
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A FIXED WIDIH LAYOUT 


To create a fixed width layout, 
the width of the main boxes on 
a page will usually be specified 
in pixels (and sometimes their 
height, too). 


Here you can see several <div> 
elements, each of which uses an 
idor class attribute to indicate 
its purpose on the page 


In a book like this, the result of 
both the fixed and liquid layouts 
look similar. To get a real feel for 
them, you need to view them in 
your browser and see how they 
react when you adjust the size of 
the browser window. 


The fixed width layout will stay 
the same width no matter what 
size the browser window is, 
whereas the liquid layout will 
stretch (or shrink) to fill the 
screen. 


The HTML is the same for both 
the fixed width layout example 
on this page and the liquid layout 
example you see next. 


LAYOUT 


chapter-15/fixed-width-layout.html 


<body> 
<div id="header"> 
<h1l>Logo</h1> 
<div id="nav"> 
<ul> 
<li><a href="">Home</a></1i> 
<li><a href="">Products</a></1i> 
<li><a href="">Services</a></1i> 
<li><a href="">About</a></1i> 
<li><a href="">Contact</a></1i> 
</ul> 
</div> 
</div> 


<div id="content"> 
<div id="feature"> 
<p>Feature</p> 
</div> 
<div class="article columnl1"> 
<p>Column One</p> 
</div> 
<div class="article column2"> 
<p>Column Two</p> 
</div> 
<div class="article column3"> 
<p>Column Three</p> 
</div> 
</div> 
<div id="footer"> 
<p>&copy; Copyright 2011</p> 
</div> 
</body> 


body { 
width: 960px; 
margin: 0 auto;} 

#content { 
overflow: auto; 
height: 100%; } 

jinav, #feature, #footer { 
background-color: #efefef; 
padding: 10px; 
margin: 10px;} 

.columnl, .column2, .column3 { 
background-color: #efefef; 
width: 300px; 


float: left; 
margin: 10px;} 
Ti { 


display: inline; 
padding: 5px;} 


Logo 
Home Products Sanmioès Aboul Contact 
Feature 
Column One Column Two 


© Copyright 2011 


Column Three 


The rule for the «body» element 
is used to fix the width of the 
page at 960 pixels, and it is 
centered by setting the left and 
right margins to auto. 


The main boxes on the page 
have a margin of 10 pixels to 
create a gap between them. 


The navigation, feature, and 
footer panels stretch to the 
width of the containing element 
(which in this instance is the 
<body> element), so we do not 
need to specify a width for them. 


The three columns are each 300 
pixels wide and use the float 
property, which allows them to 
sit next to each other. 


Sometimes an extra HTML 
element is used to contain the 
page, rather than fixing the 
width of the <body>. This allows 
the background of the browser 
window to have a different color 
than the background of the 
content. 
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A LIQUID 


The liquid layout uses 
percentages to specify the width 
of each box so that the design 
will stretch to fit the size of the 
screen. 


When trying this in your 


browser, remember to make the 
window smaller and larger. 


LAYOUT 


LAYOUT 


chapter-15/liquid-layout.html 


<body> 
<div id="header"> 
<h1l>Logo</h1> 
<div id="nav"> 
<ul> 
<li><a href="">Home</a></1i> 
<li><a href="">Products</a></1i> 
<li><a href="">Services</a></1i> 
<li><a href="">About</a></1i> 
<li><a href="">Contact</a></1i> 
</ul> 
</div> 
</div> 


<div id="content"™> 
<div id-"feature"» 


<p>Feature</p> 

</div> 

<div class="article columnl1"> 
<p>Co n One</p> 

</div> 

<div class="article column2"> 
<p>Co n Two</p> 

</div> 

<div class="article column3"> 
<p>Co n Three</p> 

</div> 

</div> 


<div id="footer"> 
<p>&copy; Copyright 2011</p> 
</div> 
</body> 


body { 
width: 90%; 
margin: 0 auto;} 

#tcontent (overflow: auto;} 

#nav, #feature, #footer { 
margin: 1%;} 

.columnl, .column2, .column3 { 
width: 31.3%; 
float: left; 
margin: 1%;} 

.column3 {margin-right: 0%;} 

li t 
display: inline; 
padding: 0.5em; } 

#tnav, #footer { 
background-color: #efefef; 
padding: 0.5em 0;} 

#feature, .article { 
height: 10em; 
margin-bottom: lem; 
background-color: #efefef; } 


Column Ore Column Tem Column Three 
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There is a rule on the «body» 
element to set the width of the 
page to 9096 so that there is a 
small gap between the left and 
right-hand sides of the browser 
window and the main content. 


The three columns are all given 
a margin of 196 and a width of 
31.396. This adds up to 99.996 
of the width of the «body» 
element, so some browsers 
might not perfectly align the 
right-hand side of the third 
column with other elements on 
the page. 


The <div> elements that hold 
the navigation, feature, and 
footer will stretch to fill the 
width of the containing <body> 
element. They are given a 196 
margin to help them align with 
the columns. 


If you imagine the browser 
window to be very wide or very 
narrow, you can see how lines of 
text could become very long or 
very short. 


This is where the min-width 
and max-width properties help 
create boundaries within which 
the layout can stretch (although 
Internet Explorer 7 was the first 
version of IE to support these 
properties). 
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LAYOUT GRIDS 


Composition in any visual art (such as design, painting, or photography) 
is the placement or arrangement of visual elements — how they are 
organized on a page. Many designers use a grid structure to help them 
position items on a page, and the same is true for web designers. 


On the right, you can see a set of 
thick vertical lines superimposed 
over the top of a newspaper 
website to show you how the 
page was designed according to 
a grid. This grid is called the 960 
pixel grid and is widely used by 
web designers. 


387 LAYOUT 


Grids set consistent proportions 
and spaces between items which 
helps to create a professional 
looking design. 


If you flick back through the 
pages of this book you will see 
that it, too, has been constructed 
according to a grid (comprising 
three columns). 


As you will see on pages 389- 
390, it is possible to create many 
different layouts using this one 
versatile grid. 


While a grid might seem like a 
restriction, in actual fact it: 


® Creates a continuity between 
different pages which may 
use different designs 


* Helps users predict where to 
find information on various 
pages 


@ Makes it easier to add new 
content to the site ina 
consistent way 


* Helps people collaborate 
on the design of a site in a 
consistent way 


EXAMPLE GRID 


Today's paper ~ Zeitgeist v 


Mobile site Signin Register A Textlarger - smaller Aboutus v 


guardian.co.uk Coture 3) E552) 
News Sport Comment Culture Business Money Life & style Trayel Environment TV Blogs Data Mobile Offers Jobs 
Em Art and design Books Film Music Stage Cuts blog Kids books TV & radio. Games Blogs Podcasts Video 


culture — 


Editors' picks 


Cannes 2011 Music 


Film Weekly from Cannes Come to our new band show! 


Podcast: Jason Solomons meets Cannes festival Rumer, Wretch 32 and Summer Camp share the bill at 
president Gilles Jacob, Palme d'Or juror Mahamat- New band of the day night for Guardian and Observer 
Saleh Haroun, electro-duo Air and our own Joe Comish readers =  ——— 
© Post your comment Alexis Petridis reviews Kate Bush's new album On this site 
Gi Video: Space milkshake anyone? Rihanna and the rise of raunch pop 
Tilda Swinton: ‘It's bloody having a child" News: Fleetwood Mac to reunite in 2012 Art and design 
Diary: Will | ever leave Hotel Cannes-ifornia? Alexis Petridis interviews Donovan m 
Full coverage: Cannes 2011 
Architecture 
Books Photography Stage TV and radio Design 
i aa Photography 
Your photographs 


Jonathan Jones on art 
Books 


Sci-fi is no place Ng Han Guan Pinter in a cell Last night's TV News 

for dabblers In pictures: Ng Han Video: Can you make Review: Inside the Reviews, 

"Write about what you Guan is a Singaporean five plays by Harold Human Body did more to 

love, rather than what you Photographer based in Pinter into a piece of make death less scary Books genres 

have contempt for, says Beijing. In this set of immersive theatre? than any theologian Books 

lain M Banks photographs he captures Andrew Dickson found © 21 comments akg 
———————————Ó facets. of daily life ^R————Ó next hay set ___ LX 
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POSSIBLE LAYOUTS: 
960 PIXEL WIDE 
12 COLUMN GRID 


389 LAYOUT 


These two pages illustrate a 960 The page is 960 pixels wide and 


pixel wide, 12 column grid. They there are 12 equal sized columns 
demonstrate how it is possible (shown in gray), each of which is 
to create a wide range of column is 60 pixels wide. 


layouts using this one grid. 


Each column has a margin set 

to 10 pixels, which creates a a 
gap of 20 pixels between each 
column and 10 pixels to the left 
and right-hand sides of the page. 
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CSS FRAMEWORKS 


CSS frameworks aim to make your life easier by providing the code for 
common tasks, such as creating layout grids, styling forms, creating 
printer-friendly versions of pages and so on. You can include the CSS 
framework code in your projects rather than writing the CSS from scratch. 


ADVANTAGES 


® They save you from 
repeatedly writing code for 
the same tasks. 


* They will have been tested 
across different browser 
versions (which helps avoid 
browser bugs). 


INTRODUCING THE 960.GS CSS FRAMEWORK 


One of the most popular uses of 
CSS frameworks is in creating 
grids to layout pages. There 

are several grid frameworks 

out there, but the one we will 

be looking at over the next few 
pages is the 960 Grid System 
(available at www.960.gs). 


960.gs provides a style sheet 
that you can include in your 
HTML pages. Once our page 
links to this style sheet, you can 
provide the appropriate classes 
to your HTML code and it will 
create multiple column layouts 
for you. The 960.gs website 
also provides templates you can 
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DISADVANTAGES 


® They often require that you 
use class names in your 
HTML code that only control 
the presentation of the page 
(rather than describe its 
content). 


download to help design your 
pages using a 12 column grid. (In 
addition, there is a variation on 
the grid that uses 16 columns.) 


To create a 12 column grid, an 
element that contains the entire 
page is given a class attibute 
whose value is container 12. 
This sets the content of the 
page to be 960 pixels wide and 
indicates that we are using a 12 
column grid. 


There are different classes for 
blocks that take up 1, 2, 3, 4, 
and up to 12 columns of the grid. 
Each block uses class names 


* In order to satisfy a wide 
variety of needs, they often 
contain more code than you 
need for your particular web 
page (commonly referred to 
as code "bloat"). 


such as grid, 3 (for a block that 
stretches over three columns), 
grid. 4 (for a block that 
stretches over 4 columns) and 
and so on through to grid. 12 
(for a box that is the full width 
of the page). These columns all 
float to the left, and there is a 10 
pixel margin to the left and the 
right of each one. 


There are several other grid- 
based CSS frameworks available 
online, such as those at: 
blueprintcss.org 
lessframework.com 
developer.yahoo.com/yui/ 
grids/ 


USING THE 960.65 GRID 


Below you can see a sample layout of a page just like the fixed width 
page example. On the next page, we will recreate this using the 960.gs 
stylesheet. Instead of writing our own CSS to control layout, we will need 
to add classes to the HTML indicating how wide each section should be. 
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A GRID-BASED LAYOUT 
USING 960.GS 


Let's take a look at an HTML 
page and how it has been 
marked up to use the 960.gs grid 
System. 


You can see that we include 
the CSS for the grid using the 
«link? element inside the 
<head> of the page. 


The styles we are writing 
ourselves are shown on the right 
hand page. 


The 960. 12. col.css stylesheet 
contains all of the rules we need 
to control the grid layout. The 
HTML uses the class names: 


container 12toactasa 
container for the whole page and 
indicate that we are using a 12 
column grid 


clearfix to ensure that 
browsers know the height of the 
containing box, because it only 
contains floated elements (this 
addresses the issue you met on 
pages 371-372) 


grid. 12 to create a block that is 
twelve columns wide 


grid. 4 to create a block that is 
four columns wide 
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chapter-15/grid-layout.html 


<head> 


<title>Grid Layout</title> 

<link rel="stylesheet" type="text/css" 
href-"css/960 12 col.css" /> 

<style>See the right hand page</style> 


</head> 
<body> 


<div class-"container 12 clearfix"> 
<div id="header" class="grid_12"> 


<h1l>Logo</h1> 


<div id="nav"> 


<ul> 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 
</div> 


href="">Home</a></1i> 
href="">Products</a></1i> 
href="">Services</a></1i> 
href="">About</a></1i> 
href="">Contact</a></1i> 


<div id="feature" class="grid_12"> 
<p>Feature</p> 


</div> 


<div class-"article grid_4"> 
<p>Column One</p> 


</div> 


<div class-"article grid_4"> 
<p>Column Two</p> 


LLAT 


<div class-"article grid_4"> 
<p>Column Three</p> 


</div> 


<div id="footer" class="grid_12"> 
<p>&copy; Copyright 2011</p> 


</div> 
Sfdjuselee 
</body> 


.container 12 --> 


The 960.gs style sheet has taken 


care of the layout, creating the 
* f correct width for the columns 
font-family: Arial, Verdana, sans-serif; and setting the spaces between 
color: #665544; them. Therefore, the only rules 
text-align: center;} we needed to add are shown on 
țnav, #feature, .article, #footer ( this page. These rules: 


background-color: #efefef; 
margin-top: 20px; 
padding: 10px 0px 5px Opx;} 


Control the font and the 
position of the text in the 


boxes 
#feature, .article { 
height: 100px;} ® Set the background colors for 
qat the boxes 


display: inline; 


padding: 5px;} Set the height of the feature 


and article boxes 


Add a margin to the top and 
| bottom of each box 


Logo 


Home Products Services Aboul Contact 


Feature 


Column One Column Two Column Three 


© Copyright 2011 
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TALL LA E ees. S she ou t e 


@import 


Some web page authors split 
up their CSS style rules into 
separate style sheets. For 
example, they might use one 
style sheet to control the layout 
and another to control fonts, 
colors and so on. 


Some authors take an even 
more modular approach 

to stylesheets, creating 
separate stylesheets to control 
typography, layout, forms, 
tables, even different styles for 
each sub-section of a site. 


There are two ways to add 
multiple style sheets to a page: 


1: Your HTML page can link 
to one style sheet and that 
stylesheet can use the @import 


rule to import other style sheets. 


2: In the HTML you can use a 
separate «link? element for 
each style sheet. 


The example on this page 
uses one «link»? element in 
the HTML to link to a style 
sheet called styles.css. This 
stylesheet then uses the 
@import rule to import the 
typography.css and 
tables.css files. 


If a styesheet uses the @import 


rule, it should appear before the 
other rules 
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chapter-15/multiple-style-sheets-import.html 


<!DOCTYPE html» 
«html»? 
<head> 
<title>Multiple Style Sheets - Import</title> 
<link rel="stylesheet" type="text/css" 
href="css/styles.css" /> 
</head> 
<body> 
<!-- HTML page content here --> 
</body> 
</html> 


chapter-15/styles.css css 


@import url("tables.css"); 
@import url("typography.css"); 
body { 
color: #666666; 
background-color: #f8f8f8; 
text-align: center; } 
#page { 
width: 600px; 
text-align: left; 
margin-left: auto; 
margin-right: auto; 
border: 1px solid #d6d6d6; 
padding: 20px;} 
h3 { 
color: #547ca0;} 


MULTIPLE STYLE SHEETS 


<!DOCTYPE html> 
«html» 
<head> 
<title>Multiple Style Sheets Link</title> 
<link rel="stylesheet" type="text/css" 
href="css/site.css" /> 
<link rel="stylesheet" type="text/css" 
href="css/tables.css" /> 
<link rel="stylesheet" type="text/css" 
href="css/typography.css" /> 
</head> 
<body> 
<!-- HTML page content here --> 
</body> 
</html> 


chapter-15/multiple-style-sheets-link.html 


Central Park Bike Hire 


Rent a bicycle to ride around Central Park 


Per hour Per day 


Cruiser $9 $45 


21 Speed $15 $50 


WHERE AND WHEN 


Loeb Boathouse 
From April to November bicycles are available on first come first serve basis for riding in Central Park 
Cash or credit card 


A $200 deposit is required for the hire of any of our bicycles 


link 


On this page you can see the 
other technique for including 
multiple style sheets. Inside the 
<head> element is a separate 
«link? element for each style 
sheet. 


The contents of site.css are 
identical to styles.css on the 
left hand page, except the code 
does not contain € import rules. 


As with all style sheets, if two 
rules apply to the same element 
then rules that appear later in a 
document will take precedence 
over previous rules. 


In the example on this page, 
any rules in typography.css 
would take precedence over 
rules in site.css (because the 
typography rules are included 
after the other rules). 


In the example on the previous 
page, the rules in styles.css 
would take precedence over the 
rules in typography.css. This 
is because when the @import 
rule is used, that is the point at 
which the browser considers the 
rules live. 
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« Safari File Edit View History Bookmarks Develop Window Help 


Layout 
4 + |O http: //www.htmlandcssbook.com/code/chapter-15 /example.html 


PEDAL FASTER. 


THE MODERN BICYCLE MAGAZINE 


The velobeld combines minimalist 
design with super quality. Devoid of 
excessive graphics and gear shi^ 
components, the velobeld product 
range delights us with its beauty and 
simplicity. The black and white (yin 
and yang?) bicycles feature a sbort 
wheelbase, a single gear and a narrow 
handlebar... All you need to explore 
the city streets. 


For those who want to create their 
bike themselves, the weloheld frames 
come in three sizes and two colours 
and are the perfect starting point. 


MacBook Pro 
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EXAMPLE 


LAYOUT 


LA * Sun 12:20 


This example demonstrates a modern 
magazine-style layout using the 960.gs grid. 
Using this style sheet saves us from having to 
create all of the CSS code ourselves. 


Several classes from the 960.gs style sheet have been added to the code 
to indicate how many columns of the grid each element should stretch 
across. As you saw in this chapter, the 960.gs stylesheet uses the float 
property to position the blocks next to each other. 


At the start of the page, the header uses fixed positioning (meaning that 
it does not move when the user scrolls down the page). The z-index 
property is added to the header to keep it on top of the remaining 
content as the user scrolls down the page. 


Both the header and footer are contained within <div> elements which 
stretch the entire width of the page. Inside those container elements sit 
other elements that use classes from the 960.gs style sheet to ensure 
that the items in the header and footer align with the rest of the content. 


The feature article takes up the entire width of the page. The push_7 

and push. 9 classes are part of the 960.gs style sheet and are used in 
the feature article to move the header and the content for this article 

over to the right. 


Under the main article you can see four blocks, each of which is 3 
columns wide. These contain images followed by links to more articles. 


This example also uses background images to create a textured 
background for the page and header, and also to contain the images for 
the feature article. You will learn more about these in the next chapter. 


Please note: If you view this example in Internet Explorer 6, the 
transparent PNGs used in this design may have a gray background. To 
learn more about this issue, visit the website accompanying this book 
where you can find a simple JavaScript that fixes this problem. 
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LAYOUT 


<!DOCTYPE html 
«html» 
<head> 
<title>Layout</title> 
<link rel="stylesheet" type="text/css" href-"css/960 12 col.css" /> 
<style type="text/css"> 
@font-face { 
font-family: 'QuicksandBook'; 
src: url('fonts/Quicksand Book-webfont.eot'); 
src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/Quicksand Book-webfont.woff') format('woff'), 
url('fonts/Quicksand Book-webfont.ttf') format('truetype'), 
url('fonts/Quicksand Book-webfont.svgfhQuicksandBook') format('svg'); 
font-weight: normal; 
font-style: normal;) 
body ( 
color: #ffffff; 
background: #413f3b url("images/bg.jpg"); 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 90%; 
margin: Opx; 
text-align: center;] 
aí 
color: #b5clad; 
text-decoration: none;} 
a:hover { 
color: #ffffff;} 
.header ( 
background-image: url("images/bg-header.jpg"); 
padding: Opx Opx Opx Opx; 
height: 100px; 
position: fixed; 
top: Opx; 
width: 100%; 
z-index: 50;} 
.nav f 
float: right; 
font-family: QuicksandBook, Helvetica, Arial, sans-serif; 
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EXAMPLE 


LAYOUT 


padding: 45px Opx Opx Opx; 
text-align: right;] 
.wrapper { 
width: 960px; 
margin: Opx auto; 
background-image: url("images/bg-triangle.png"); 
background-repeat: no-repeat; 
background-position: Opx Opx; 
text-align: left;} 
.logo { 
margin-bottom: 20px;] 
hl, h2 { 
font-family: QuicksandBook, Helvetica, Arial, sans-serif; 
font-weight: normal; 
text-transform: uppercase; } 
hi 4 
font-size: 240%; 
margin-top: 140px;] 
.date { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 75%; 
color: #b5clad;} 
.inteo { 
clear: left; 
font-size: 902; 
line-height: 1.4em;} 
.main-story { 
background-image: url("images/triangles.png"); 
background-repeat: no-repeat; 
background-position: 122px 142px; 
height: 570px;) 
-more-articles { 
border-top: lpx solid #ffffff; 
padding: 10px;} 
.more-articles p { 
border-bottom: 1px solid #807c72; 
padding: 5px Opx 15px Opx; 
font-size: 80%;} 
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EXAMPLE 


LAYOUT 


.more-articles p:last-child { 
border-bottom: none;] 
.footer { 
clear: both; 
background: rgba(0, 0, 0, 0.2); 
padding: 5px 10px;} 
.footer p f 
font-family: Helvetica, Arial, sans-serif; 
font-size: 75%; 
text-align: right} 


.footer a ( 
color: #807c72;} 
</style> 
</head> 
<body> 


<div class="header"> 
<div class="container_12"> 
<div classe"grid 5"5 
«img src-"images/logo.png" alt-"Pedal Faster - The modern bicycle magazine" 
width-"216" height-"37" class-"logo" /> 
<img src-"images/header-triangle.png" alt-"" width-"116" height-"100" /> 
</div> 
<div class="nav grid 7"5 
<a href="">home</a> / <a href="">news</a> / <a href=""Darchives</a> / 
<a href="">about</a> / <a href="">contact</a> 
</div> 
</div> 
</div> 
<div class="wrapper"> 
<div class="main-story container_12"> 
<div class="grid_6 push_6"> 
<hl><a href="">Fixed Gear Forever</a></h1> 
</div> 
<div classe" intro grid 3 push 9"5 
<p class="date">16 APRIL 2011</p> 
<p>The veloheld combines minimalist design with superb quality. Devoid of 
excessive graphics and gear shift components, the veloheld product range 
delights us with its beauty and simplicity ... </p> 
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</div> 
LIAIN i= smain-Stery se 
<div class="more-articles container_12"> 

<h2 class="grid_12"><a href="">More Articles</a></h2> 

<div class="grid_3"> 
<img src="images/morel.jpg" alt="The road ahead" width="220" height="125" /> 
<p><a href="">0n the Road: from the fixed gear fanatic's point of view</a></p> 
<p><a href="">Brand History: Pashley Cycles - hand-built in England</a></p> 
<p><a href="">Frame Wars: Innovations in cycle manufacture and repair</a></p> 

</div> 

<div class="grid_3"> 
<img src-"images/more2.jpg" alt="Sketchbook" width="220" height="125" /> 
<p><a href="">Touring Diary: A sketchbook in your basket</a></p> 
<p><a href="">Top Ten Newcomers for 2012: A peek at what's to come</a></p> 
<p><a href="">InnerTube: The best cycling videos on the web</a></p> 

</div> 

<div class="grid_3"> 
<img src="images/more3.jpg" alt="Repair shop sign" width="220" height="125" /> 
<p><a href="">Product Review: All baskets were not created equal</a></p> 
<p><a href="">Going Public: Out &amp; About with the founder of Public</a></p> 
<p><a href="">Cycle Lane Defence: Know your rights</a></p> 

</div> 

«div class="grid_3"> 
<img src="images/more4.jpg" alt="Schwinn Spitfire" width="220" height="125" /> 
<p><a href="">Bicyle Hall of Fame: The 1958 Schwinn Spitfire</a></p> 
<p><a href="">Reader Survey: Share your thoughts with us!</a></p> 
<p><a href="">Chain Gang: The evolution of the humble bike chain</a></p> 


</div> 
é/divo<l-= .more-articles -+> 
</div><!-- .wrapper --> 


<div class="footer clearfix"> 
<div class="container_12"> 
<p class="grid_12"><a href="">Legal Information</a> | <a href="">Privacy 
Policy</a> | <a href="">Copyright &copy; Pedal Faster 2011</a></p> 
</div> 
</div> 
</body> 
</html> 
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SUMMARY 


LAYOUT 


<div> elements are often used as containing elements 
to group together sections of a page. 


Browsers display pages in normal flow unless you 
specify relative, absolute, or fixed positioning. 


The float property moves content to the left or right 
of the page and can be used to create multi-column 
layouts. (Floated items require a defined width.) 


Pages can be fixed width or liquid (stretchy) layouts. 


Designers keep pages within 960-1000 pixels wide, 
and indicate what the site is about within the top 600 
pixels (to demonstrate its relevance without scrolling). 


Grids help create professional and flexible designs. 
CSS Frameworks provide rules for common tasks. 


You can include multiple CSS files in one page. 


IMAGES 


> Controlling size of images in CSS 
> Aligning images in CSS 
> Adding background images 


Controlling the size and alignment of 
your images using CSS keeps rules that 
affect the presentation of your page in 
the CSS and out of the HTML markup. 


You can also achieve several interesting effects using 
background images. In this chapter you will learn how to: 


® Specify the size and alignment of an image using 
* Add background images to boxes 


9 Create image rollovers in CSS 
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IMAGES 


CONTROLLING SIZES OF 
IMAGES IN CSS 


eee ete chapter-16/image-sizes.html 
height properties in CSS, just <img src="images/magnolia-large.jpg" 
like you can for any other box. class-"large" alt-"Magnolia" /> 
«img src-"images/magnolia-medium. jpg" 
Specifying image sizes helps class-"medium" alt-"Magnolia" /> 
pages to load more smoothly <img src-"images/magnolia-small.jpg" 
because the HTML and CSS class-"small" alt-"Magnolia" /> 


code will often load before the 
images, and telling the browser 
how much space to leave for an 


image allows it to render the rest C55 
of the page without waiting for img.large { 
the image to download. width: 500px; 
height: 500px;} 
You might think that your site img.medium { 
is likely to have images of all width: 250px; 
different sizes, but a lot of sites height: 250px;} 
use the same sized image across img.small { 
many of their pages. width: 100px; 


height: 100px;} 
For example, an e-commerce site 
tends to show product photos 
at the same size. Or, if your site 
is designed ona grid, then you 
might have a selection of image 
sizes that are commonly used on 
all pages, such as: 


Small portrait: 220 x 360 
Small landscape: 330 x 210 
Feature photo: 620 x 400 


Whenever you use consistently 
sized images across a site, 

you can use CSS to control 

the dimensions of the 

images, instead of putting the 
dimensions in the HTML. 
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First you need to determine the 
sizes of images that will be used 
commonly throughout the site, 
then give each size a name. 


For example: 
small 
medium 
large 


Where the <img> elements 
appear in the HTML, rather 
than using width and height 
attributes you can use these 
names as values for the class 
attribute. 


In the CSS, you add selectors for 
each of the class names, then 
use the CSS width and height 
properties to control the image 
dimensions. 
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ALIGNING IMAGES 
USING CSS 


re e chapter-16/aligning-images.html 

to move an element to the left or <p><img src="images/magnolia-medium. jpg" 

the right of its containing block, alt-"Magnolia" class="align-left medium" /> 

allowing text to flow around it. <b><i>Magnolia</i></b> is a large genus that 
contains over 200 flowering plant species...</p> 

Rather than using the <img> <p><img src="images/magnolia-medium. jpg" 

element's align attribute, web alt-"Magnolia" class="align-right medium" /> 

page authors are increasingly Some magnolias, such as <i>Magnolia stellata</i> 

using the float property to align and <i>Magnolia soulangeana</i>, flower quite 

images. There are two ways that early in the spring before the leaves open...</p> 


this is commonly achieved: 


1: The float property is added 
to the class that was created to 


CSS 


represent the size of the image img.align-left ( 

(such as the small class in our float: left; 

example). margin-right: 10px;) 
img.align-right ( 

2: New classes are created with float: right; 

names such as align-left or margin-left: 10px;] 

align-right to align the images img.medium { 

to the left or right of the page. width: 250px; 

These class names are used in height: 250px;) 


addition to classes that indicate 
the size of the image. 


In this example you can see the 


i = i -ri Magnolia is a large genus that contains over 200 flowering plant 
of 
al ign 1 eft and al TIP wg] h t si species. It is named after French botanist Pierre Magnol, and 
having evolved before bees appeared the flowers were developed ta 


classes used to align the image. Pss kapa Trid ete c 


Some magnolias, such as i 
Magnolia stellata and 
Magnolia soulangeana, flower 
quite early in the spring before 
the leaves open. Others flower 
in late spring or early summer, 
such as Magnolia grandiflora. 


It is also common to add a 
margin to the image to ensure 
that the text does not touch their 
edges. 
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CENTERING IMAGES 
USING CSS 


] ] By default, images are inline 
chapter-16/centering-images.html elements. This means that they 
<p><img src-"images/magnolia-medium.jpg" flow within the surrounding text. 
alt-"Magnolia" class-"align-center medium" /> In order to center an image, it 
<b><i>Magnolia</i></b> is a large genus that should be turned into a block- 
contains over 200 flowering plant species. It level element using the display 
is named after French botanist Pierre Magnol and, property with a value of block. 
having evolved before bees appeared, the 
flowers were developed to encourage pollination Once it has been made into a 
by beetle.</p> block-level element, there are 


two common ways in which you 
can horizontally center an image: 


1: On the containing element, 


you can use the text-align 
img.align-center ( property with a value of center. 
display: block; 
margin: Opx auto;} 2: On the image itself, you can 
img.medium { use the use the margin property 
width: 250px; and set the values of the left and 
height: 250px;} right margins to auto. 


You can specify class names 
that allow any element to be 
centered, in the same way that 
you can for the dimensions or 
alignment of images. 


The techniques for specifying 
image size and alignment of 
images can also be used with 
the HTML5 <figure> element, 
which you met on page 119. 


Magnolia is a large genus that contains over 200 flowering plant species. It is named after 
French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were 
developed to encourage pollination by beetle. 
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BACKGROUND IMAGES 


background-image 


The background-image 
property allows you to place 

an image behind any HTML 
element. This could be the entire 
page or just part of the page. By 
default, a background image will 
repeat to fill the entire box. 


The path to the image follows 
the letters url, and it is put 
inside parentheses and quotes. 


Here is the image 
tile used in this 
example. 


In the first example, you can 

see a background image being 
applied to an entire page 
(because the CSS selector 
applies to the «body» element). 
In the second example, the 
background image just applies to 
a paragraph. 


If you search online, you will 
find lots of resources that offer 
background textures that you 
can use on your pages. 


Background images are often 
the last thing on the page to 
load (which can make a website 
seem slow to load). As with any 
images you use online, if the 
size of the file is large it will take 
longer to download. 


IMAGES 


chapter-16/background-image-body.html 


body ( 
background-image: url("images/pattern.gif");] 


Planting Guide 


Magnolia 


Magnolia grandiflora, commonly knowns Southern magnoliaor bull bay, isa 
tree of the Tamily Magnoliaceag’na itheastern United States. froomcoastal 
a southdo centra] Flor n ro Te dOklahon 
27.5 m (90 ft) ght, it isa large stri "e th large dar 
and. large wh fant flowers. Widely culti ‘ound the World; 
oultivars shay on bred and marketed commercially. The timberas hard und heavy, and 


chapter-16/background-image-element.html 


pt 
background-image: url("images/pattern.gif");) 


Planting Guide 


Magnolia 


Magnolia grandiflora, commonly known sts the Southern magnolia or bull bay 
is a tree ofthe family Magnoliaceae native to the southeastern United States, from 
Coastal Virginia soutt to central Florida, and west to eastern Texas aod Oklahoma 


Reaching’ 27.5 m (90 ft) in height, itis a large Striking evergreen treë with large 


dark-green leaves and large white fragrant flowers, Widely cultivated around the 


CSS 


CSS 


REPEATING IMAGES 


background-repeat 
background-attachment 


body ( 
background-image: url("images/header.gif"); 
background-repeat: repeat-x;] 


RESULT 


Planting Guide 


Magnolia 


Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is à 
tree of the family Magnoliaceae native to the southeastern United States, from coastal 
Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 
27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves 
and laree white fraerant flowers. Widelv cultivated around the world. over a hundred 


body ( 
background-image: url("images/tulip.gif"); 
background-repeat: no-repeat; 
background-attachment: fixed; } 


Planting Guide 
Magnolia 


Magnolia grandiflora, commonly known as the Southern magnolia or bull bay. is a 
tree of the family Magnoliaceae native to the southeastern United States, from coastal 
Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 
27,5 m (90 ft) in height, it isa large striking evergreen tree with large dark green leaves 
and large white fragrant flowers. Widely cultivated around the world, over a hundred 


chapter-16/background-repeat.html 


chapter-16/background-attachment.html 


The background-repeat 
property can have four values: 


repeat 

The background image is 
repeated both horizontally and 
vertically (the default way it 

is shown if the background- 
repeat property isn't used). 


repeat-x 

The image is repeated 
horizontally only (as shown in 
the first example on the left). 


repeat-y 
The image is repeated vertically 
only. 


no-repeat 


The image is only shown once. 


The background-attachment 
property specifies whether a 
background image should stay in 
one position or move as the user 
scrolls up and down the page. It 
can have one of two values: 


fixed 


The background image stays in 
the same position on the page. 


scroll 

The background image moves 
up and down as the user scrolls 
up and down the page. 
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BACKGROUND POSITION 


background-position 


When an image is not being 
repeated, you can use the 
background-position 
property to specify where in the 
browser window the background 
image should be placed. 


This property usually has a pair 
of values. The first represents 

the horizontal position and the 
second represents the vertical. 


left top 

left center 
left bottom 
center top 
centena ene 
center bottom 
right top 


right center 


right bottom 


APIO Ahk 


If you only specify one value, 
the second value will default to 
Genie 


You can also use a pair of pixels 
or percentages. These represent 
the distance from the top left 
corner of the browser window 
(or containing box). The top left 
corner is equal to 0% 0%. The 
example shown, with values of 
50% 50%, centers the image 
horizontally and vertically. 
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chapter-16/background-position.html CSS 


body ( 
background-image: url("images/tulip.gif"); 
background-repeat: no-repeat; 
background-position: center top;) 


Planting Guide 
Magnolia 


Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is à 
tree of the family Magnoliaceae native tothe southeastern United States, from coastal 
Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 
27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves 
and large white fragrant flowers. Widely cultivated around the world, over a hundred 


chapter-16/background-position-percentage.html CSS 


body ( 
background-image: url("images/tulip.gif"); 
background-repeat: no-repeat; 
background-position: 50% 505;) 


Planting Guide 


Magnolia 


Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is à 
tree of the family Magnoliaceae native to the southeastern United States, from coastal 
Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 
27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves 
and large white fragrant flowers, Widely-eultivated around the world, over à hundred 
cultivars have been bred and marketed commercially. The timber is hard and heavy, and 
has been used commercially to make furniture, pallets, and veneer, 


SHORTHAND 


body { 
background: #ffffff url("images/tulip.gif") 
no-repeat top right;} 


Planting Guide 


Magnolia 


Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a 
tree of the family Magnoliaceae native to the southeastern United States, from coastal 
Virginia south to central Florida, and west to eastern Texas and Oklahoma, Reaching 
27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark greem leaves 
and large white fragrant flowers, Widely cultivated around the world, over a hundred 
cultivars have been bred and marketed commercially. The timber is hard and heavy, and 
has been used commercially to make furniture, pallets, and veneer, 


Ranunculus 


Ranunculus asiaticus (Persian Buttercup) is a species of buttercup (Ranunculus) native 
to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, 
Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant 
growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, 
with leaves higher on the stems more deeply divided; like the stems, they are downy or 
hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one 
to several flowers on each stem. 


Tulip 


Tulipa gesneriana I.. or "Didier's tulip" is a plant belonging to the family of Liliaceae. 
This species has uncertain origins, possibly from Asia, and has become naturalised in 
south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are 
derived from Tulípa gesneriana. The flower and bulb can cause dermatitis through the 
allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The 
sweet-scented bisexual flowers appear during April and May. Bulbs are extremely 
resistant to frost, and can tolerate temperatures well below freezing - a period of low 
temperature is necessary to induce proper growth and flowering, triggered by an increase 
in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and 
added to cereals or flour. 


chapter-16/background-shorthand.html 


background 


The background property acts 
like a shorthand for all of the 
other background properties 
you have just seen, and also the 
background-color property. 


The properties must be specified 
in the following order, but you 
can miss any value if you do not 
want to specify it. 


1: background-color 

2: background-image 

3: background-repeat 

4: background-attachment 
5: background-position 


CSS3 will also support the use 
of multiple background images 
by repeating the background 
shorthand. Because few 
browsers supported this 
property at the time of writing, it 
was not commonly used. 


div ( 
background: 

url(example-1.jpg) 
top left no-repeat, 
url(example-2.jpg) 
bottom left no-repeat, 
url(example-3.jpg) 
centre top repeat-x;} 


The first image is shown on top, 
with the last one on the bottom. 


IMAGES 416 


417 


IMAGE ROLLOVERS 
& SPRITES 


Using CSS, it is possible to create 
a link or button that changes to a 
second style when a user moves 
their mouse over it (known as a 
rollover) and a third style when 
they click on it. 


This is achieved by setting a 
background image for the link or 
button that has three different 
styles of the same button (but 
only allows enough space to 
show one of them at a time). 
You can see the image we are 
using in this example on the 
right. It actually features two 
buttons on the one image. 


When the user moves their 
mouse over the element, or 
clicks on it, the position of the 
background image is moved to 
show the relevant image. 


When a single image is used 

for several different parts of an 
interface, it is known as a sprite. 
You can add the logo and other 
interface elements, as well as 
buttons to the image. 


The advantage of using sprites is 
that the web browser only needs 
to request one image rather than 
many images, which can make 
the web page load faster. 
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chapter-16/image-rollovers-and-sprites.html 


<a class="button" id-"add-to-basket"» 


Add to basket</a> 


<a class="button" id="framing-options"> 


Framing options</a> 


a.button { 
height: 36px; 


CSS 


background-image: url("images/button-sprite. jpg"); 


text-indent: -9999px; 

display: inline-block; } 
a#tadd-to-basket { 

width: 174px; 


background-position: 0px Opx;} 


a#tframing-options { 
width: 210px; 


background-position: -175px Opx;} 


affadd-to-basket:hover { 


background-position: 0px -40px;} 


a#tframing-options:hover { 


background-position: -175px -40px;} 


affadd-to-basket:active { 


background-position: 0px -80px;} 


a#tframing-options:active { 


background-position: -175px -80px;} 


ADD TO BASKET (3) 


ADD TO BASKET (+) 


ADD TO BASKET (3) | 


ADD TO BASKET (3) 


FRAMING OPTIONS [| 


FRAMING OPTIONS | 


FRAMING OPTIONS [_] | 


FRAMING OPTIONS, |_| 


»W 


In this example, you can see two 

links that look like buttons. Each 

of the buttons has three different 
states. These are all represented 
in a single image. 


Because the <a> element is 

an inline element, we set the 
display property of these links 
to indicate that they should be 
inline-block elements. This 
allows us to specify the width 
and height of each <a> element 
so that it matches the size of its 
corresponding button. 


The background-position 
property is used to move the 
image in order to show the 
button in the right state. 


When the user hovers over a 
link, the :hover pseudo-class 
has a rule that moves the 
background-position of the 
image to show a different state 
for that button. 


Similarly, when the user clicks on 
the link, the :active pseudo- 
class has a rule to show the third 
state for that button. 


Touch screen devices will not 
change a link's state when 

the user hovers over it, as the 
screens do not yet have a way 
to tell when the user is hovering. 
However, they will change their 
appearance when the user 
activates them. 
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C555: GRADIENTS 


background-image 


CSS3 is going to introduce the 
ability to specify a gradient for 
the background of a box. The 
gradient is created using the 
background-image property 
and, at the time of writing, 
different browsers required a 
different syntax. 


Since it is not supported by all 
browsers, it is possible to specify 
a background image for the box 
first (which would represent the 
gradient) and then provide the 
CSS alternatives for browsers 
that support gradients. 


On this page, we are focusing 
on linear gradients. You can see 
that in order to create a linear 
gradient, we need to specify 
two colors (that the gradient is 
between). 


Some browsers allow you 

to specify the angle of the 
gradient, or even different types 
of gradients (such as radial 
gradients), but support is not 

as widespread as that for linear 
gradients. 
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chapter-16/gradient.html 


#gradient { 


/* fallback color */ 

background-color: #66cccc; 

/* fallback image */ 

background-image: url(images/fallback-image.png) ; 

/* Firefox 3.6+ */ 

background-image: -moz-linear-gradient (#336666, 
166cccc) ; 

/* Safari 4+, Chrome 1+ */ 

background-image: -webkit-gradient(linear, 0% 0%, 
0% 100%, from(#66cccc), to (#336666) ); 

/* Safari 5.1+, Chrome 10+ */ 

background-image: -webkit-linear-gradient (#336666, 
#66cccc); 

/* Opera 11.10+ */ 

background-image: -o-linear-gradient (#336666, 
#66cccc); 

height: 150px; 

width: 300px;} 


CSS 


RESULT 


CONTRAST OF 
BACKGROUND IMAGES 


If you want to overlay text on a background image, the image must be low 
contrast in order for the text to be legible. 


HIGH CONTRAST 


The majority of photographs 
have quite a high contrast, which 
means that they are not ideal for 
use as a background image. 


LOW CONTRAST 


A low contrast 
background 
image makes 
the text easier 
to read. 


Image editing applications such 
as Photoshop and GIMP have 
tools that allow you to manually 
adjust your images to have lower 
contrast. 


SCREEN 


Re diot a. 
A screen 
= added to a high 
3 contrast image 
makes the text 
easier to read. 


l 


To overlay text on an image with 
high contrast, you can place a 
semi-transparent background 
color (or "screen") behind the 
text to improve legibility. 
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EXAMPLE 


IMAGES 


This example demonstrates how to use CSS to 
create a simple image gallery layout. 


A background texture is applied to the whole page by repeating an 
image with the texture behind the <body> element. A repeating 
background image is sometimes referred to as wallpaper. 


The content of the page is put inside a «div» element whose class is 
wrapper. This is used to fix the width of the page to 720 pixels. Its left 
and right margins are set to auto to center it in the middle of the screen. 


The images sit inside an HTML5 «figure» element, and their captions 
are provided in the <figcaption> element. CSS is used to set the 
dimensions and background color for each «figure» element. The 
dimensions of the images themselves are also set using CSS, and they 
are given a single pixel gray border. 


For the captions, a background image is used to the left of the text. We 
do not want this image to fill the background so we specify that it should 
not repeat. Padding is used to the left of the text so that the words do 
not go over the background image. 


Each of the «figure» elements is contained within a «div», which has 
two purposes. Firstly, it is used to create the three-column layout by 
specifying a width and margins for the element and then floating it to 
the left. Secondly, it adds a subtle shadow underneath each image. This 
creates a three-dimensional appearance making it look like a piece of 
card. To ensure that this sits underneath the image, the background- 
position property is used. 
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<!DOCTYPE html»? 
«html» 
<head> 
<title>Images</title> 
<style type="text/css"> 
body { 
color: #665544; 
background-color: #d4d0cé6; 
background-image: url("images/backdrop.gif"); 
font-family: Georgia, "Times New Roman", serif; 
text-align: center;) 
-wrapper ( 
width: 720px; 
margin: Opx autoz} 
.header { 
margin: 40px 0px 20px Opx;} 
.entry { 
width: 220px; 
float: left; 
margin: 10px; 
height: 198px; 
background-image: url("images/shadow.png"); 
background-repeat: no-repeat; 
background-position: bottom; } 
figure { 
display: block; 
width: 202px; 
height: 170px; 
background-color: #e7e3d8; 
padding: 9px; 
text-align: left;} 
figure img { 
width: 200px; 
height: 150px; 
border: 1px solid #d6d6d6;} 
figcaption { 
background-image: url("images/icon.png"); 
padding-left: 20px; 
background-repeat: no-repeat; } 
</style> 
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</head> 
<body> 
<div class-"wrapper"? 
<div class="header"> 
<img src-"images/title.gif" alt-"Galerie Botanique" width="456" height-"122" /> 
<p>Here is a selection of antique botanical prints held in our collection.</p> 
</div> 
<div class="entry"> 
<figure><img src="images/print-01.jpg" alt-"Helianthus" /> 
<figcaption>Helianthus</figcaption> 
</figure> 
</div> 
<div class="entry"> 
<figure><img src="images/print-02.jpg" alt-"Passiflora" /> 
<figcaption>Passiflora</figcaption> 
</figure> 
</div> 
<div class="entry"> 
<figure><img src="images/print-03.jpg" alt-"Nyctocalos" /> 
<figcaption>Nyctocalos</figcaption> 
</figure> 
</div> 
<div class="entry"> 
<figure><img src="images/print-04.jpg" alt-"Polianthes" /> 
<figcaption>Polianthes</figcaption> 
</figure> 
</div> 
<div class="entry"> 
<figure><img src="images/print-05.jpg" alt="Ficus" /> 
<figcaption>Ficus</figcaption> 
</figure> 
</div> 
<div class="entry"> 
<figure><img src="images/print-06.jpg" alt="Dendrobium" /> 
<figcaption>Dendrobium</figcaption> 
</figure> 
</div> 
</div> 
</body> 
</html> 
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SUMMARY 


IMAGES 


You can specify the dimensions of images using CSS. 
This is very helpful when you use the same sized 
images on several pages of your site. 


Images can be aligned both horizontally and vertically 
using CSS. 


You can use a background image behind the box 
created by any element on a page. 


Background images can appear just once or be 
repeated across the background of the box. 


You can create image rollover effects by moving the 
background position of an image. 


To reduce the number of images your browser has to 
load, you can create image sprites. 


HIML5 LAYOUT 


> HTML5 layout elements 
> How old browsers understand new elements 
> Styling HTML5 layout elements with CSS 


HTML5 is introducing a new set of 
elements that help define the structure of 


a page. 


They are covered here (rather than with the other HTML 
elements you met earlier in the book) because you'll find 

it easier to understand how they can be used now that you 
have seen how CSS can control the layout a page. These 
new elements are going to play an important part in creating 
layouts going forward. In this chapter you will see: 


The new HTMLS5 layout elements and their uses 
How they offer helpful alternatives to the <div> element 
How to ensure older browsers recognize these elements 


As with all HTML5 and CSS3 content, its usage is still 
subject to change but it is already widely being used by web 
developers and it is likely that you will want to use them. 
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TRADITIONAL HTML 
LAYOUTS 


For a long time, web page authors used <div> elements to group 
together related elements on the page (such as the elements that form a 
header, an article, footer or sidebar). Authors used class or id attributes 
to indicate the role of the «div? element in the structure of the page. 


On the right you can see a <body> 
layout that is quite common 
(particularly on blog sites). 


<div id="page"> 


«div id="header"> 


At the top of the page is the 
header, containing a logo and the 
primary navigation. 


Under this are one or more <div id= 

5 : "sidebar"» 
articles or posts. Sometimes 
these are summaries that link to 


individual posts. 


There is a side bar on the right- 
hand side (perhaps featuring e 

a search option, links to other iv class-"article"» 
recent articles, other sections of : 
the site, or even ads). 


When coding a site like this, 
developers would usually put 
these main sections of the page 
inside <div> elements and use 
the class or id attributes to 
indicate the purpose of that part 
of the page. 
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NEW HTML5 LAYOUT 
ELEMENTS 


HTMLS5 introduces a new set of elements that allow you to divide up the 
parts of a page. The names of these elements indicate the kind of content 
you will find in them. They are still subject to change, but that has not 
stopped many web page authors using them already. 


<body> This example has exactly the 
same structure as seen on the 
previous page. However, many 
of the <div> elements have been 
replaced by new HTML5 layout 
elements. 


<div id="page"> 


<header> 


For example, the header sits 
<aside> inside a new «header? element, 
the navigation in a «nav? 
element, and the articles are in 
individual «article» elements. 


The point of creating these 
new elements is so that web 
page authors can use them to 
help describe the structure of 
the page. For example, screen 
reader software might allow 
users to ignore headers and 
footers and get straight to 
the content. Similarly, search 
engines might place more 
weight on the content in an 
«article» element than that 
in the «header? or «footer? 
elements. | think you will agree 
that it also makes the code 
easier to follow. 
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HEADERS & FOOTERS 
«header» «footer»? 


The «header? and «footer» 
elements can be used for: 


The main header or footer 
that appears at the top or 
bottom of every page on the 
site. 


A header or footer for an 
individual «article» or 
«section? within the page. 


In this example, the «header? 
element used to contain the site 
name and the main navigation. 
The «footer» element contains 
copyright information, along 
with links to the privacy policy 
and terms and conditions. 

Each individual «article» and 
«section» element can also 
have its own «header? and 
«footer» elements to hold the 
header or footer information for 
that section within the page. 


For example, on a page with 
several blog posts, each 
individual post can be thought 
of as a separate section. The 
«header» element can therefore 
be used to contain the title and 
date of each individual post, and 
the «footer» might contain 
links to share the article on 
social networking sites. 


Please note that all of the 
code shown in this chapter 
is referenced in one HTML 
document which is called: 
html5-layout.html 
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chapter-17/example.html 


<header> 
<hl>Yoko's 
<nav> 
<ul> 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</nav> 
</header> 


Kitchen</h1> 


href-"" class="current™>home</a></1i> 


href="">classes</a></1i> 
href="">catering</a></1i> 
href="">about</a></1i> 
href="">contact</a></1i> 


chapter-17/example.html 


<footer> 


&copy; 2011 Yoko's Kitchen 


</footer> 


NAVIGATION 


<nav> 


The <nav> element is used to 
chapter-17/example.html ; : ee 
contain the major navigational 
<nav> blocks on the site such as the 
<ul> primary site navigation. 
<li><a href-"" class="current">home</a></1i> 
<li><a href="">classes</a></1i> Going back to our blog example, 
<li><a href="">catering</a></1i> if you wanted to finish an article 
<li><a href=""Dabout</a></1i> with links to related blog posts, 
<li><a href="">contact</a></1i> these would not be counted as 
</ul> major navigational blocks and 
</nav> therefore should not sit inside a 


<nav> element. 


At the time of writing, some of 
the developers that were already 
using HTML5 decided to use the 
«nav? element for the links that 
appear at the bottom of every 
page (links to things like privacy 
policy, terms and conditions 

and accessibility information). 
Whether this will be widely 
adopted is still yet to be seen. 
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ARTICLES 
«article» 


The «article»? element acts as 
a container for any section of a chabbe sti exomelesnim 
page that could stand alone and <article> 
potentially be syndicated. <figure> 

<img src="images/bok-choi.jpg" alt="Bok Choi" /> 
This could be an individual <figcaption>Bok Choi</figcaption> 
article or blog entry, a comment </figure> 
or forum post, or any other <hgroup> 
independent piece of content. <h2>Japanese Vegetarian</h2> 

<h3>Five week course in London</h3> 
If a page contains several articles </hgroup> 
(or even summaries of several <p>A five week introduction to traditional 
articles), then each individual Japanese vegetarian meals, teaching you a 
article would live inside its own selection of rice and noodle dishes.</p> 
<article> element. </article> 

<article> 

The <article> elements can <figure> 
even be nested inside each <img src="images/teriyaki.jpg" 
other. For example, a blog post alt="Teriyaki sauce" /> 
might live inside one <article> <figcaption>Teriyaki Sauce</figcaption> 
element and each comment on </figure> 
the article could live inside its <hgroup> 
own child <article> element. <h2>Sauces Masterclass</h2> 

«h3»0ne day workshop</h3> 

</hgroup> 


<p>An intensive one-day course looking at how to 
create the most delicious sauces for use in a 
range of Japanese cookery.</p> 
</article> 
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ASIDES 
<aside> 


The <aside> element has two 


chapter -M/exampie htn] purposes, depending on whether 
<aside> itis inside an <article> 
<section class="popular-recipes"> element or not. 
<h2>Popular Recipes</h2> 
<a href="">Yakitori (grilled chicken)</a> When the <aside> element 
<a href="">Tsukune (minced chicken patties)</a> is used inside an <article> 
<a href="">0konomiyaki (savory pancakes)</a> element, it should contain 
<a href="">Mizutaki (chicken stew)</a> information that is related to the 
</section> article but not essential to its 
«section class="contact-details"> overall meaning. For example, a 
<h2>Contact</h2> pullquote or glossary might be 
<p>Yoko's Kitchen<br /> considered as an aside to the 
27 Redchurch Street<br /> article it relates to. 
Shoreditch<br /> 
London E2 7DP</p> When the <aside> element is 
</section> used outside of an <article> 
</aside> element, it acts as a container 


for content that is related to 
the entire page. For example, 
it might contain links to other 
sections of the site, a list of 
recent posts, a search box, or 
recent tweets by the author. 
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SECIIONS 


«section» 


The «section» element groups 


related content together, and chapter- TUS mei 
typically each section would «section class="popular-recipes"> 
have its own heading. <h2>Popular Recipes</h2> 
<a href="">Yakitori (grilled chicken)</a> 
For example, on a homepage <a href="">Tsukune (minced chicken patties)</a> 
there may be several <section> <a href-""»0konomiyaki (savory pancakes)</a> 
elements to contain different <a href="">Mizutaki (chicken stew)</a> 
sections of the page, such as </section> 
latest news, top products, and «section class="contact-details"> 
newsletter signup. <h2>Contact</h2> 
<p>Yoko's Kitchen<br /> 
Because the <section> element 27 Redchurch Street<br /> 
groups related items together, Shoreditch<br /> 
it may contain several distinct London E2 7DP</p> 
«article» elements that have a </section> 


common theme or purpose. 


Alternatively, if you have a 
page with a long article, the 
<section> element can be 
used to split the article up into 
separate sections. 


The <section> element should 
not be used as a wrapper for 

the entire page (unless the 

page only contains one distinct 
piece of content). If you want a 
containing element for the entire 
page, that job is still best left to 
the <div> element. 
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HEADING GROUPS 
<hgroup> 


The purpose of the <hgroup> 
HTML chapter-17/example.html : 
element is to group together a 
<hgroup> set of one or more <h1> through 
<h2>Japanese Vegetarian</h2> <h6> elements so that they are 
<h3>Five week course in London</h3> treated as one single heading. 
</hgroup> 


For example, the <hgroup> 
element could be used to contain 
both a title inside an <h2> 
element and a subtitle within an 
<h3> element. 


This element has had a mixed 
reception. When it was first 
proposed by the people 
developing HTMLS5, there were 
some complaints and it was 
withdrawn from the HTML5 
proposals. However, some 
people changed their minds and 
it has been added it back into the 
language. Some developers do 
not like the use of the <hgroup> 
element, and prefer to place a 
subtitle inside a <p> element 
(using an attribute to indicate 
that it is a subheading). 


Some suggest that it is of little 
use other than as a styling hook. 
It has, however, been popular 
with those developers who 
believe that it is useful to group 
together the primary heading 
and the subheading (as both can 
be integral parts of a heading). 


HTML5 LAYOUT 438 


FIGURES 
«figure» <figcaption> 


elementin Chapter whenwe Chapter-I7/example.html HTML | 
looked at images. It can be used <figure> 

to contain any content that is <img src="images/bok-choi.jpg" alt="Bok Choi" /> 
referenced from the main flow of <figcaption>Bok Choi</figcaption> 

an article (not just images). </figure> 


It is important to note that the 
article should still make sense 

if the content of the <figure> 
element were moved (to another 
part of the page, or even to a 
different page altogether). 


For this reason, it should only be 
used when the content simply 
references the element (and not 
for something that is absolutely 
integral to the flow of a page). 


Examples of usage include: 
Images 
Videos 
Graphs 
Diagrams 
Code samples 
Text that supports the main 


body of an article 


The «figure» element should 
also contain a <figcaption> 
element which provides a text 
decription for the content of 

the «figure» element. In 

this example, you can see a 
«figure» has been added inside 
the «article» element. 
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SECTIONING ELEMENTS 
<div> 


It may seem strange to follow 
chapbenstvexomplestem these new elements by revisiting 
<div class="wrapper"™> the <div> element again. (After 
<header> all, the new elements are often 
<hl>Yoko's Kitchen</h1> going to be used in its place.) 
<nav> 
<!-- nav content here --> However, the <div> element 
</nav> will remain an important way to 
</header> group together related elements, 
<section class="courses"> because you should not be using 
<!-- section content here --> these new elements that you 
</section> have just met for purposes other 
<aside> than those explicitly stated. 
<!-- aside content here --> 
</aside> Where there is no suitable 
<footer> element to group a set of 
<!-- footer content here --> elements, the <div> element will 
</footer> still be used. In this example, it is 
</div><!-- „wrapper --> used as a wrapper for the entire 
page. 


Some people have asked why 
there is no <content> element 
to contain the main part of 

a page. The reason is that 
anything that lies outside of the 
<header>, <footer> or <aside> 
elements can be considered as 
the main content. 
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44] 


LINKING AROUND 
BLOCK-LEVEL ELEMENTS 


HTML5 allows web page authors 
to place an <a> element around 
a block level element that 
contains child elements. This 
allows you to turn an entire block 
into a link. 


This is not a new element in 
HTMLS5, but it was not seen as a 
correct usage of the <a> element 
in earlier versions of HTML. 
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chapter-17/example.html 


<a href-"introduction.html"» 
«article»? 
<figure> 
<img src="images/bok-choi.jpg" 
alt-"Bok Choi" /> 
<figcaption>Bok Choi</figcaption> 
</figure> 
<hgroup> 
<h2>Japanese Vegetarian</h2> 
<h3>Five week course in London</h3> 
</hgroup> 
<p>A five week introduction to traditional 
Japanese vegetarian meals, teaching you a 
selection of rice and noodle dishes.</p> 
</article> 
</a> 


HELPING OLDER 
BROWSERS UNDERSTAND 


Older browsers that do not 


chapter -M/erampie htni know the new HTML5 elements 
header, section, footer, aside, nav, article, figure will automatically treat them as 
{ inline elements. Therefore, to 
display: block;} help older browsers, you should 
include the line of CSS on the 
left which states which new 
elements should be rendered as 
chapter-17/example.html blockslevelelements: 
Kh--[9T TE PE 8]5 
<script src-"http://html5shiv.googlecode.com/svn/ Also, IE9 was the first version of 
trunk/htm15.js"></script> Internet Explorer to allow CSS 
<!Lendif]--> rules to be associated with these 


new HTMLS5 layout elements. 
In order to style these elements 
using earlier versions of IE, you 
need to use a simple JavaScript 
known as the HTMLS5 shiv or 
HTMLS5 shim. 


You do not need to understand 
JavaScript to use it. You can 
just link to a copy that Google 
hosts on its servers. It should 
be placed inside a conditional 
comment which checks if the 
browser version is less than 
(hence the 1t) IE9. 


Unfortunately, this workaround 
does require that anyone using 
IE8 or earlier versions of IE 

has JavaScript enabled in their 
browser. If they do not have 
JavaScript enabled then they will 
not be able to see the content of 
these HTML5 elements. 


HTML5 LAYOUT 442 


*& Safari File Edit View History Bookmarks | Develop | Window Help 


HTMLS Layout 


Japanese Vegetarian 
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EXAMPLE 
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| MO Eje Sat 13:14 Q 


This example shows a cooking site built using 
new HTML5 elements to describe the structure 
of the page (rather than just grouping items 
using <div> elements). 


The header and footer of the page sit inside «header» and «footer» 
elements. The courses are grouped together inside a «section» 
element that has a class attribute whose value is courses (to 
distinguish it from other «section» elements on the page). The sidebar 
sits inside an «aside» element. 


Each of the courses lives inside an «article» element, and use the 
<figure> and <figcaption> elements to contain an image. The 
headings for the courses have subheadings, so these are grouped inside 
an <hgroup> element. In the sidebar, the recipes and contact details are 
placed inside separate «section? elements. 


The page is styled using CSS. The only difference is that our selectors 
are using the new HTML5 elements to allow us to create rules that 
target those elements. In order for the CSS to work in versions of IE 
before Internet Explorer 9, the HTML5 page contains a link to the 
HTMLS5 shiv JavaScript (hosted on Google's servers) inside a 
conditional comment. 
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EXAMPLE 


HTML5 LAYOUT 


<!DOCTYPE html» 
«html» 
<head> 
<title>HTML5 Layout</title> 
<style type="text/css"> 

header, section, footer, aside, nav, article, figure, figcaption { 
display: block; } 

body ( 
color: #666666; 
background-color: #f9f8f6; 
background-image: url("images/dark-wood. jpg"); 
background-position: center; 
font-family: Georgia, times, serif; 
line-height: 1.4em; 
margin: Opx;} 

-wrapper { 
width: 940px; 
margin: 20px auto 20px auto; 
border: 2px solid #000000; 
background-color: #ffffff;} 

header { 
height: 160px; 
background-image: url(images/header. jpg); } 

hl { 
text-indent: -9999px; 
width: 940px; 
height: 130px; 
margin: Opx;} 

nav, footer { 
clear: both; 
color: #ffffff; 
background-color: #aeaca8; 
height: 30px;} 

nav ul { 
margin: Opx; 
padding: 5px Opx 5px 30px;} 

nav li { 
display: inline; 
margin-right: 40px;] 

nav lia { 
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color: #ffffff;} 
nav li a:hover, nav li a.current ( 

color: #000000; } 
section.courses { 

float: left; 

width: 659px; 

border-right: 1px solid #eeeeee; } 
article { 

clear: both; 

overflow: auto; 

width: 100%;} 
hgroup { 

margin-top:40px; } 
figure { 

float: left; 

width: 290px; 

height: 220px; 

padding: 5px; 

margin: 20px; 

border: 1px solid #eeeeee; } 
figcaption { 

font-size: 90%; 

text-align: left;} 


aside { 
width: 230px; 
float: left; 


padding: Opx Opx 0px 20px;} 
aside section a { 
display: block; 
padding: 10px; 
border-bottom: 1px solid #eeeeee; } 
aside section a:hover { 
color: #985d6a; 
background-color: #efefef;} 
a { 
color: #de6581; 
text-decoration: none; } 
hil, 2, h3- t 
font-weight: normal; } 
nz £ 
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margin: 10px 0px 5px 0px; 
padding: 0px;} 
h3 ( 
margin: 0px Opx 10px 0px; 
color: #de6581; } 
aside h2 { 
padding: 30px Opx 10px Opx; 
color: #de6581; } 
footer { 
font-size: 80%; 
padding: 7px Opx Opx 20px;} 
</style> 
&t-epyT Ute fE: 8T» 
<script src="http://html5shiv.googlecode.com/svn/trunk/htm15.js"></script> 
<!Lendif]--> 
</head> 
<body> 
<div class="wrapper"™> 
<header> 
<hl>Yoko's Kitchen</h1> 
<nav> 
<ul> 
<li><a href-"" class="current">home</a></1i> 
<li><a href="">classes</a></1i> 
<li><a href="">catering</a></1i> 
<li><a href="">about</a></1i> 
<li><a href="">contact</a></1i> 
</ul> 
</nav> 
</header> 
<section class="courses"> 
<article> 
<figure> 
<img src="images/bok-choi.jpg" alt="Bok Choi" /> 
<figcaption>Bok Choi</figcaption> 
</figure> 
<hgroup> 
<h2>Japanese Vegetarian</h2> 
<h3>Five week course in London</h3> 
</hgroup> 
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<p>A five week introduction to traditional Japanese vegetarian meals, 
teaching you a selection of rice and noodle dishes.</p> 
</article> 
<article> 
<figure> 
<img src="images/teriyaki.jpg" alt="Teriyaki sauce" /> 
<figcaption>Teriyaki Sauce</figcaption> 
</figure> 
<hgroup> 
<h2>Sauces Masterclass</h2> 
«h3»0ne day workshop</h3> 
</hgroup> 
<p>An intensive one-day course looking at how to create the most delicious 
sauces for use in a range of Japanese cookery.</p> 
</article> 
</section> 
<aside> 
«section class-"popular-recipes"? 
<h2>Popular Recipes</h2> 
<a href="">Yakitori (grilled chicken)</a> 
<a href="">Tsukune (minced chicken patties)</a> 
<a href="">Okonomiyaki (savory pancakes)</a> 
<a href="">Mizutaki (chicken stew)</a> 
</section> 
<section class="contact-details"> 
<h2>Contact</h2> 
<p>Yoko's Kitchen<br /> 
27 Redchurch Street<br /> 
Shoreditch<br /> 
London E2 7DP</p> 
</section> 
</aside> 
<footer> 
&copy; 2011 Yoko's Kitchen 
</footer> 
</div><!-- .wrapper --> 
</body> 
</html> 
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SUMMARY 


HTML5 LAYOUT 


The new HTML5 elements indicate the purpose of 
different parts of a web page and help to describe 
its structure. 


The new elements provide clearer code (compared 
with using multiple «div» elements). 


Older browsers that do not understand HTML5 
elements need to be told which elements are 
block-level elements. 


To make HTML5 elements work in Internet Explorer 8 
(and older versions of IE), extra JavaScript is needed, 
which is available free from Google. 


PROCESS 


& DESIGN 


> How to approach building a site 
> Understanding your audience and their needs 
> How to present information visitors want to see 


This section discusses a process that 
you can use when you are creating a new 
website. 

It looks at who might be visiting your site and how to ensure 
the pages feature the information those visitors need. It also 


covers some key aspects of design theory to help you create 
professional looking sites. In this chapter, we will look at: 


How to understand the audience your site may attract and 
what information they will expect to find on it 


How to organize information so that visitors can find what 
they are looking for 


Design theory for presenting information in a way that 
helps visitors achieve their goals 


Design tips to help you create more attractive and 
professional sites 
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WHO IS THE SITE FOR? 


Every website should be designed for the 
target audience— not just for yourself or the 
site owner. It is therefore very important to 


understand who your target audience is. 


It can be helpful to ask some 
questions about the people you 


TARGET AUDIENCE: INDIVIDUALS 


would expect to be interested in * Whatisthe age range of your target audience? 
the subject of your site. : ; : : 
l " * Will your site appeal to more women or men? What is the mix? 
If you ask a client who a site is * Which country do your visitors live in? 
for, itis not uncommon for them "m 
7 ; af ® Do they live in urban or rural areas? 
to answer "the entire world. 
* What is the average income of visitors? 
Realistically, it is unlikely to be . 
i y . * Whatlevel of education do they have? 
relevant to everyone. If your site 
sells light bulbs, even though * Whatis their marital or family status? 
most people using a computer : . ; 
* What is their occupation? 
probably use light bulbs, they 
are not likely to order them from ® How many hours do they work per week? 
someone in a different country. 
y * How often do they use the web? 
Even if the site has a wide * What kind of device do they use to access the web? 


appeal, you can still think about 
the demographics of a sample of 
the target audience. 
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TARGET AUDIENCE: COMPANIES 


What is the size of the company or relevant department? 
What is the position of people in the company who visit your site? 
Will visitors be using the site for themselves or for someone else? 


How large is the budget they control? 


NAME 


Gender 


Age 


Location 


Occupation 


Income 


Web Use 


GORDON 
M 
28 
Chicago 
Teacher 
$62k 


2-3 days/wk 


Invent some fictional visitors from your typical 
target audience. They will become your friends. 
They can influence design decisions from color 
palettes to level of detail in descriptions. 


MOLLY JASPER 
F M 
47 19 
San Francisco New York 
Attorney Student 
$180k $24k 
Daily Daily 


If you have a question about how 
the site is going to be used, or 
what its priorities should be, you 


AYO IVY 
M F 
32 35 
Miami Boston 
Retail Journalist 
$160k $75k 
4-5 days/wk Daily 


will be able to think back and ask 
yourself, "What would Gordon 
or Molly want in this situation?" 
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WHY PEOPLE VISIT 


YOUR WEBSITE 


Now that you know who your visitors are, you 
need to consider why they are coming. While 
some people will simply chance across your 
website, most will visit for a specific reason. 


Your content and design should 
be influenced by the goals of 
your users. 


To help determine why people 
are coming to your website, 
there are two basic categories of 
questions you can ask: 


1: The first attempts to discover 
the underlying motivations for 
why visitors come to the site. 


2: The second examines the 
specific goals of the visitors. 
These are the triggers making 
them come to the site now. 
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KEY MOTIVATIONS 


® Are they looking for general 
entertainment or do they 
need to achieve a specific 
goal? 


* |fthere is a specific goal, is 
it a personal or professional 
one? 


* Dothey see spending time on 
this activity as essential or a 
luxury? 


SPECIFIC GOALS 


Do they want general 
information / research (such 
as background on a topic / 
company), or are they after 
something specific (such as a 
particular fact or information 
on a product)? 


Are they already familiar with 
the service or product that 
you offer or do they need to 
be introduced to it? 


Are they looking for time 
sensitive information, such as 
the latest news or updates on 
a particular topic? 


Do they want to discover 
information about a specific 
product or service to help 
them decide whether to buy 
it or not? 


Do they need to contact you? 
If so, can they visit in person 
(which might require opening 
hours and a map)? Or might 
they need email or telephone 
contact details? 


WHAT YOUR VISITORS ARE 
TRYING TO ACHIEVE 


It is unlikely that you will be able to list every 
reason why someone visits your site but you 
are looking for key tasks and motivations. This 
information can help guide your site designs. 


First you want to create a list GORDON bought a tennis racquet several years ago; now he wants to 
of reasons why people would purchase one from your site for his girlfriend. 

be coming to your site. You can 

then assign the list of tasks to MOLLY has read about your new doggy daycare service in the press and 
the fictional visitors you created wants to find out whether it would be suitable for her to use. 

in the step described on the 

previous page. JASPER had a bad experience staying in a hotel when visiting Sydney, 


Australia, and wants to make a complaint. 


AYO hopes to study architecture and wants to learn more about a new 
course that is being offered. 


IVY is a picture editor and wants to look at a photographer's site to see 
examples of his work before deciding whether to commission him. 


PROCESS 458 


WHAT INFORMATION 
YOUR VISITORS NEED 


You know who is coming to your site and why 

they are coming, so now you need to work out 
what information they need in order to achieve 
their goals quickly and effectively. 


You may want to offer additional 
supporting information that you 
think they might find helpful. 


Look at each of the reasons why 
people will be visiting your site 
and determine what they need to 
achieve their goals. 


You can prioritize levels of 
information from key points 
down to non-essential or 
background information. 


By ensuring that you provide the 
information that your visitors 
are looking for, they will consider 
your site more relevant to them. 


459 PROCESS 


Therefore, you will have more 
opportunity to tell them any 
extra information that you think 
would be helpful to them (or to 
expose them to other products 
and services you want to 
promote). 


If you do not appear relevant to 
them by answering their needs, 
however, they are likely to go 
elsewhere. 


Here are some questions to help 
you decide what information to 
provide for visitors to your site... 


KEY INFORMATION 


* Will visitors be familiar with 
your subject area / brand 
or do you need to introduce 
yourself? 


* Will they be familiar with 
the product / service / 
information you are covering 
or do they need background 
information on it? 


* What are the most important 
features of what you are 
offering? 


* What is special about what 
you offer that differentiates 
you from other sites that offer 
something similar? 


® Once people have achieved 
the goal that sent them to 
your site, are there common 
questions people ask about 
this subject area? 


HOW OFTEN PEOPLE WILL 
VISIT YOUR SITE 


A website about fashion trends 
will need to change a lot more 
frequently than one that is 
promoting a service that people 
do not buy regularly (such as 
domestic plumbing or double 
glazing). 


Once a site has been built, it can 
take a lot of time and resources 
to update it frequently. 


Working out how often people 
are likely to revisit your site gives 
you an indication for how often 
you should update the site. 


Some sites benefit from being updated more 
frequently than others. Some information (such 
as news) may be constantly changing, while 
other content remains relatively static. 


It can often be helpful to set a 
schedule for when a site will be 
updated (rather than doing it on 
an ad hoc basis). 


You will often find that some 
parts of a site will benefit from 
being updated more frequently 
than others. 


Here are some questions to help 
you decide how often to update 
your website content... 


GOODS / SERVICES 


* How often do the same 
people return to purchase 
from you? 


* How often is your stock 
updated or your service 
changed? 


INFORMATION 


* How often is the subject 
updated? 


* What percentage of your 
visitors would return for 
regular updates on the 
subject, compared with 
those who will just need the 
information once? 
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SITE MAPS 


Now that you know what needs to appear 
on your site, you can start to organize the 
information into sections or pages. 


The aim is to create a diagram 
of the pages that will be used 
to structure the site. This is 
known as a site map and it will 
show how those pages can be 
grouped. 


To help you decide what 
information should go on each 
page, you can use a technique 
called card sorting. 


This involves placing each 
piece of information that a 
visitor might need to know on 
a separate piece of paper and 
then organizing the related 
information into groups. 


Each group relates to a page and, 
on larger sites the, pages can in 
turn can be grouped together to 
create different sections of the 
website. 
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The groups of information are 
then turned into the diagram 
that is known as the site map. 


Sometimes it can be helpful to 
ask people who are the target 
audience to help you group 
related information together. 


A site map will usually 

begin with the homepage. 
Additionally, if the site is large 
and is compartmentalized 
into sections, each section 
might require its own section 
homepage to link to all of the 
information within it. 


For example, most online shops 
have section homepages for 
each type of product, which then 
in turn link to individual product 


pages. 


You may need to duplicate some 
information if it needs to appear 
on more than one page. 


The pages (or groups of pages) 
will inform how users navigate 
through the site. 


Remember to focus on the 
goals that your visitors want to 
achieve. 


It is worth noting that the 

site owner might organize 
information in a way that is 
different to what the public 
expects. It is important to reflect 
the public's understanding of the 
subject (rather than just the site 
owner's understanding of it). 


EXAMPLE SITE MAP 


ARTICLES CONTACT 


HISTORY LOCATION 


FOUNDATION BOOK REVIEWS OPENING TIMES 


FUTURE PLANS TICKETS 


INTERVIEWS 
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WIREFRAMES 


A wireframe is a simple sketch of the key 
information that needs to go on each page of a 
site. It shows the hierarchy of the information 
and how much space it might require. 


A lot of designers will take the 
elements that need to appear on 
each page and start by creating 
wireframes. This involves 
sketching or shading areas 
where each element of the page 
will go (such as the logo, primary 
navigation, headings and main 
bodies of text, user logins etc). 


By creating a wireframe you can 
ensure that all of the information 
that needs to be on a page is 
included. 


The example on the right was 
created in Photoshop using the 
templates that come with the 
960.gs grid system. 
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You should not include the 
color scheme, font choices, 
backgrounds or images for 
the website in the wireframe. 
It should focus on what 
information needs to be on 
each page and create a visual 
hierarchy to indicate the most 
important parts of each page. 


The wireframes make design 

easier because you know what 
information needs to appear on 
which page before considering 


You can sketch wireframes 
on paper or use a graphics 
application on your computer 


(such as Illustrator or InDesign). 


how the the page should look. 

It can be very helpful to show the 
wireframes of a site to a client 
before showing them a design. 

It enables the client to ensure 
the site has all the functions and 
information it needs to offer. 


If you just present a site design 
to a client, itis common for them 
to focus on how the site looks, 
which means they may not raise 
issues about its function after 
the site has been built. 


There are also online wireframe 
tools such as those at: 
http://gomockingbird.com 
http://lovelycharts.com 


EXAMPLE WIREFRAME 


key selling point of product 
key selling point of product 


product photography key selling point of product 


news testimonials sale 


headline one n x d , 
Lorem ipsum dolor v amet, consaetetur adipiscing Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, 


alit Sed volurpat, uma at viverra molestie, elit turpis consectetur adipiscing elit. consectetur adipiscing elit. 

"La ven prettier alan Nile sth Sed volutpat, urna at viverra Sed volutpat, urna at viverra 

lacus. : " 1 " p t 

hea s molestie, elit turpis vulputate molestie, elit turpis vulputate 
eadline two o e no's 

Euri RENE tennis mi, non pretium ipsum tellus mi, non pretium ipsum tellus 


partunent montes. nascetur ndculus mus. Maecenas sit amet lacus. sit amet lacus. 
placerat aliquam convallis. 


copyright notice 
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GETTING YOUR MESSAGE 
ACROSS USING DESIGN 


The primary aim of any kind of visual design 
is to communicate. Organizing and prioritizing 
information on a page helps users understand 
its importance and what order to read it in. 


CONTENT 


Web pages often have a lot of 
information to communicate. 

For example, the pages of 

online newspapers will have 
information that does not appear 
on every page of the print 
equivalent: 


* A masthead or logo 
* Links to navigate the site 


* Links to related content and 
other popular articles 


* Login or membership options 
* Ability for users to comment 
* Copyright information 


* Links to privacy policies, 
terms and conditions, 
advertising information, RSS 
feeds, subscription options 


With so much on the page, the 
designer needs to organize and 
prioritize the information to 
communicate their message 
and help users find what they're 
looking for. 
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PRIORITIZING 


If everything on a page appeared 
in the same style, it would be 
much harder to understand. (Key 
messages would not stand out.) 


By making parts of the page 
look distinct from surrounding 
content, designers draw 
attention to (or away from) 
those items. 


Designers create something 
known as a visual hierarchy 

to help users focus on the key 
messages that will draw people's 
attention, and then guide them 
to subsequent messages. 


We look at visual hierarchy on 
pages 467-468. 


ORGANIZING 


Grouping together related 
content into blocks or chunks 
makes the page look simpler 
(and easier to understand). 


Users should be able to 
identify the purpose of each 
block without processing each 
individual item. 


By presenting certain types of 
information in a similar visual 
style (such as using the same 
style for all buttons or all links), 
users will learn to associate that 
style with a particular type of 
content. 


We look at grouping and 
similarity on pages 469-470. 


C CampaignMonitor 


Email marketing software 


for designers and their clients 


ts and 


etting 


iaces iu 


Create & Send = Manage Lists & 
= Beautiful Emails Subscribers 
Design great looking emails using your We handle signups, unsubscribes and 


own tools, or create templates and let bounces automatically. Easily create 
your clients send their own. targeted segments of subscribers. 


Powerful 
Analytics 


Actionable reports that go beyond 
opens and clicks. Track your email 
related conversions and sales 


FE » Mark-up, Resell 
and Profit 


White-label and rebrandable, you set 
the price your clients pay and we'll 
send through your profit each month 


Send unlimited email 
campaigns for as little as 


15% 


PER MONTH " peo hd 


Used by leading designers 
and companies everywhere 


Let's look at an example of how 
design can be used to effectively 
communicate the services of a 
company. 


VISUAL HIERARCHY 


Attention is immediately drawn 
to a picture that shows the 
service this company offers 

and a headline to explain it. The 
size and colored background 
reinforce that this is the primary 
message on the page. 


Should this service appeal to the 
user, below they can see more 
detail about what it does, how 
much it costs, and who uses it. 


GROUPING 


There are several chunks of 
information on this page. 


At the top you can see the logo 
and navigation. Under this is the 
information that introduces the 
company's services. 


Further down are three distinct 
groups showing you what the 
services do, the costs involved 
and some of the services' users. 


See Plans & Pricing a d WWF 
Client: int ti d thei ; 
uuu. ee 
and automatically eam a profit. 
SIMILARITY 


There are several examples of 
similarity within this page. 


The four points (at the bottom 
left of the screenshot) are all 
presented in a similar manner 
with consistent headings and 
icons. 


All of the links in the body text 


are in blue so it is clear what text 
is clickable. 
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VISUAL HIERARCHY 


Most web users do not read entire pages. Rather, they skim to find 
information. You can use contrast to create a visual hierarchy that gets 
across your key message and helps users find what they are looking for. 


SIZE 


Larger elements will grab users' 
attention first. For this reason it 
is a good idea to make headings 
and key points relatively large. 


Lorem ipsum 
dolor sit amet, consectetur 
adipiscing elit. Lorem 
ipsum dolor sit amet, 
consectetur adipscing elit. 
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COLOR 


Foreground and background 
color can draw attention to key 
messages. Brighter sections tend 
to draw users' attention first. 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. 
Lorem ipsum dolor 
sit amet, consectetur 
adipscing elit. 


STYLE 


An element may be the same 
size and color as surrounding 
content but have a different style 
applied to it to make it stand out. 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. 
Lorem ipsum dolor 
sit amet, consectetur 
adipscing elit. 


Visual hierarchy refers to the order in which your eyes perceive what 
they see. It is created by adding visual contrast between the items being 
displayed. Items with higher contrast are recognized and processed first. 


nega 3) roy Coe Tm IT cn 
Q Smithsonian (at Donne T $ soin CE 


Explore Visit  Getinvolved Connect Educators | Kids Researchers Volunteers | Members | Intems 


Home Museums and Zoo 


Research Centers Exhibitions Events Cultural Programs 


onian 


^n 
Plan Your Visit » Explore Our Exhibitions» ^ Search Our Collections » Browse Our Encyclopedia » 


Featured Events 
E The Beovtifol Come 
fA, hug 29, 2844, beer 


Visiting the Museums & Zoo 


Smithsonian Magazine 


August 19, 2011 


AR Stolen: How the 
MIETEN nona Una netame 
Bi the worts's most 
amous Painting 
2n tere: The Picky 
Batara of the 
Pacine 


Rese more on Smersomarmag. com » 


Popular Smithsonian Blogs 


UF vba 
1 Ml forest growth may 
| cp 


Y ^ Author Talk and Book Signing 
Pauia Shelton 


Connect Online 


„m ee 


eoo 


See ai Sonal mene Onterings « 


September 11: Remembrance and 
Reflection 


Mon, Sas $ 2011. 112m 


See tre Compiese verts Caienzar + 


IMAGES 


Images create a high visual 
contrast and often attract the 
eye first. They can be used to 
draw attention to a specific 
message within the page. In 
some cases, the right image can 
succinctly reveal more than an 
entire page of text. 


The effect of a well-designed 
visual hierarchy is largely 
subliminal. Achieving a good 
hierarchy requires balance; if 
nothing stands out a site can be 
rather uninteresting, and if too 
many aspects are competing 
for your attention it can be hard 
to find the key messages. This 
example has a clear hierarchy 
which addresses the needs of 
visitors to the site. 
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GROUPING AND 
SIMILARITY 


When making sense of a design, we tend to organize visual elements 
into groups. Grouping related pieces of information together can make a 
design easier to comprehend. Here are some ways this can be achieved. 


PROXIMITY 


When several items are 

placed close together, they are 
perceived as more related than 
items that are placed further 
apart. (You can also nest groups 
of information within larger 
groups of information.) 


WHITE SPACE 


Placing related items closer 
together and leaving a bigger 
gap between unrelated items. 
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CLOSURE 


When faced with a complicated 
arrangement of items, we 

will often look for a single or 
recognisable pattern or form. 

A real or imaginary box can be 
formed around elements due to 
their proximity and alignment. 


COLOR 


A background color placed 
behind related items to 
emphasize their connection. 


CONTINUANCE 
peo 


When elements are placed in 

a line or a curve then they are 
perceived to be more related 
than those that are not following 
the same direction. This can be 
used to direct a reader from one 
part of a page to the next. 


BORDERS 


LLLI] 


A line can be drawn around the 
border of the group or between it 
and its neighbors. 


We naturally observe similarities in design, and things that are similar are 
perceived to be more related than things that are dissimilar. Repetition 

of similar color, size, orientation, texture, font, or shape, suggests that 
matching elements have similar importance or meaning. 


Book Reviews 


Raw Creation 

John Maizels 

Raw Creation is the definitive book 
on outsider art and provides an 
indispensible guide to the self-taught 
art of this century and a fascinating 
account of human creativity. The 
chapter entitled Wonders of the 
World is mostly dedicated to Nek 
Chand's Rock Garden and includes a 
number of color photographs. 

Buy on Amazon 


Nek Chand Outsider Art 
Lucienne Peiry, Philippe Lespinasse 


This publication tells the story of 
Nek Chand and his life and takes the 
reader on a colorful journey through 
his Rock Garden, the world's most 


expansive work of environmental art. 


Buy on Amazon 


Fantasy Worlds 

Deidi von Schaewen, J ohn Maizels 
Presentingthe world's most unusual, 
colorful and poetic creations, some 
of which have never previously 
appeared in print. Fantasy Worlds 
includes the classics of fantasy 
architecture such as the Palais 

Ideal near Lyon and, of course, Nek 
Chand's Rock Garden in Chandigarh, 
India. 

Buy on Amazon 


The Rock Garden 
M.S.Aulakh 

This small black and white book is 
M.S. Aulakh's commentary on and 
tribute to the Rock Garden and is not 
widely available, but used copies can 
be found from time to time. 

Buy on Amazon 


Each visual chunk can contain its own hierarchy as shown in this 


example, where the individual books have their own subsections of title, 


author, text and link. 


CONSISTENCY 


In this example each book 
review has a consistent style for 
the book titles, author names, 
and purchasing links. Having 
read just one of the blocks it is 
possible to infer the meaning of 
the other items in this box that 
follow the same style. 


HEADINGS 


Giving a chunk of information 

a heading clearly tells the user 
whether or not the content of 
the grouping is relevant to them. 
If not, they can ignore all of the 
elements within it. It also helps 
users of screen readers, as users 
often have the option to hear the 
headings on the page. 
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DESIGNING NAVIGATION 


Site navigation not only helps people find where they want to go, but also 
helps them understand what your site is about and how it is organized. 


Good navigation tends to follow these principles... 


CONCISE 


Ideally, the navigation should 
be quick and easy to read. It is 
a good idea to try to limit the 
number of options in a menu to 
no more than eight links. These 
can link to section homepages 


which in turn link to other pages. 


CLEAR 


Users should be able to predict 
the kind of information that 
they will find on the page 
before clicking on the link. 
Where possible, choose single 
descriptive words for each link 
rather than phrases. 


Home Artist Profiles Exhibitions and Events Galleries 
Login Register 


About this Website Contact Us 


Home Artist Profiles 
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Exhibitions Galleries Publications About Contact 


Books and Magazines 
Terms and Conditions Privacy Policy 


SELECTIVE 


The primary navigation should 
only reflect the sections or 
content of the site. Functions 
like logins and search, and legal 
information like terms and 
conditions and so on are best 
placed elsewhere on the page. 


© 
Q 


A large site may have primary, 
secondary and even tertiary 
navigation. Primary navigation 
often appears across the top 
of the site from left to right, or 
down the left hand side of the 
page. Secondary navigation 
could be under the primary 


CONTEXT 


Good navigation provides 
context. It lets the user know 
where they are in the website at 
that moment. Using a different 
color or some kind of visual 
marker to indicate the current 


page is a good way to do this. 


navigation or down the side of 
the page. Tertiary navigation 
often sits in the footer of the 
page. The menu will not be the 


only way users navigate the site. 


They will also use links within 
each page. Some sites also offer 
a search function. 


INTERACTIVE 


Each link should be big enough 
to click on and the appearance 
of the link should change when 
the user hovers over each item 
or clicks on it. It should also 

be visually distinct from other 
content on the page. 


ONLINE EXTRA 

Go to the website accompanying 
this book for information on 

how to implement search 
functionality for your site using 
Google Search. 


CONSISTENT 


The more pages a site contains, 
the larger the number of 
navigation items there will be. 
Although secondary navigation 
will change from page to page, 
itis best to keep the primary 
navigation exactly the same. 


Home Artist Profiles Exhibitions Galleries Publications About Contact G) 


Home Exhibitions Galleries Publications About Contact ©) 
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It's important to understand who your target audience 
is, why they would come to your site, what information 
they want to find and when they are likely to return. 


Site maps allow you to plan the structure of a site. 


Wireframes allow you to organize the information that 
will need to go on each page. 


Design is about communication. Visual hierarchy helps 
visitors understand what you are trying to tell them. 


You can differentiate between pieces of information 
using size, color, and style. 


You can use grouping and similarity to help simplify 
the information you present. 


PRACTICAL 


INFORMATION 


> Search engine optimization 
> Using analytics to understand visitors 
> Putting your site on the web 


To wrap up the book we are going to look 
at some practical information that will 
help you launch a successful site. 


There are entire books written about each of the topics 
covered in this chapter but | will introduce you to the key 
themes that each subject deals with and give you pointers for 
what you need to be considering. You will see: 


* The basics of search engine optimization 


* Using analytics to understand how people are using your 
site after it has launched 


* Putting your site on the web 


15, 2011 Aug 4,2011 
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SEARCH ENGINE 
OPTIMIZATION (SEO) 


SEO is a huge topic and several books have been written on the subject. 
The following pages will help you understand the key concepts so you can 


improve your website's visibility on search engines. 


THE BASICS 


Search engine optimization (or 
SEO) is the practice of trying 

to help your site appear nearer 
the top of search engine results 
when people look for the topics 
that your website covers. 


At the heart of SEO is the idea of 
working out which terms people 
are likely to enter into a search 
engine to find your site and then 
using these terms in the right 
places on your site to increase 
the chances that search engines 
will show a link to your site in 
their results. 


In order to determine who comes 
first in the search results, search 
engines do not only look at what 
appears on your site. They also 
consider how many sites link 

to you (and how relevant those 
links are). For this reason, SEO 

is often split into two areas: 
on-page techniques and off-page 
techniques. 
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ON-PAGE TECHNIQUES 


On-page techniques are the 
methods you can use on your 
web pages to improve their 
rating in search engines. 


The main component of this is 
looking at keywords that people 
are likely to enter into a search 
engine if they wanted to find 
your site, and then including 
these in the text and HTML code 
for your site in order to help the 
search engines know that your 
site covers these topics. 


Search engines rely very heavily 
on the text that is in your pages 
so itis important that the terms 
people are going to search for 
are in text. There are seven 
essential places where you want 
your keywords to appear. 


Ensuring that any images have 
appropriate text in the value of 
their alt attribute also helps 
search engines understand the 
content of images. 


OFF-PAGE TECHNIQUES 


Getting other sites to link to you 
is just as important as on-page 
techniques. Search engines help 
determine how to rank your 

site by looking at the number of 
other sites that link to yours. 


They are particularly interested 
in sites whose content is related 
to yours. For example, if you 
were running a website that 
sold fish bait, then a link from 

a hairdresser is not likely to be 
considered as relevant as one 
from an angling community. 


Search engines also look at the 
words between the opening 
<a> tag and closing </a> tag 

in the link. If the text in the link 
contains keywords (rather than 
just click here or your website 
address) it may be considered 
more relevant. 


The words that appear in links to 
your site should also appear in 
the text of the page that the site 
links to. 


ON-PAGE SEO 


In every page of your website there are seven key places where keywords 
(the words people might search on to find your site) can appear in order 


to improve its findability. 


TBAGE TITLE 

The page title appears at the top 
of the browser window or on the 
tab of a browser. It is specified in 
the «title» element which lives 
inside the <head> element. 


2: URL / WEB ADDRESS 
The name of the file is part of 
the URL. Where possible, use 
keywords in the file name. 


3: HEADINGS 

If the keywords are in a heading 
<hn> element then a search 
engine will know that this page is 
all about that subject and give it 
greater weight than other text. 


4: TEXT 

Where possible, it helps to 
repeat the keywords in the main 
body of the text at least 2-3 
times. Do not, however, over-use 
these terms, because the text 
must be easy for a human to 
read. 


ane Feeding Guide for Kittens 


Ba [48 | [JA teecino-guide-kitrens hm 


" 
Feeding Guide 
Kittens 
A kitton's weight double or even triple during the first few 
weeks of life. T, this explosive growth - as well as high 
activity levels in may have triple the energy needs of an 
adult cat. 


These high energy needs make It harder for kittens to get enough 
calories in one meal so most kittens want to eat at leas! three or 


four meals a day. Our handy feed ide below helps you 
understand the correct quantitie (4) our kitten 


5: LINK TEXT 

Use keywords in the text that 
create links between pages 
(rather than using generic 
expressions such as "click here"). 


6: IMAGE ALT TEXT 

Search engines rely on you 
providing accurate descriptions 
of images in the alt text. This 
will also help your images show 
up in the results of image-based 
searches. 


7: PAGE DESCRIPTIONS 
The description also lives inside 
the <head> element and is 
specified using a «meta» tag. 

It should be a sentence that 
describes the content of the 
page. (These are not shown in 
the browser window but they 
may be displayed in the results 
pages of search engines.) 


Never try to fool search engines! 
They will penalize you for it. For 
example, never add text in the 
same color as the background of 
the page as they can detect this. 
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HOW IO IDENTIFY 


KEYWORDS AND PHRASES 


Determining which keywords to use on your site can be one of the 
hardest tasks when you start to think about SEO. Here are six steps that 
will help you identify the right keywords and phrases for your site. 


1: BRAINSTORM 


List down the words that 
someone might type into 
Google to find your site. Be sure 
to include the various topics, 
products or services your site is 
about. 


It often helps to ask other people 
what words they would use to 
find your site because people 
less familiar with a topic might 
use different terms than you. (In 
particular, they are less likely to 
use industry-specific jargon.) 


Your list may include some 
keyword phrases (not just 
individual words) if you have 
topics which are described by 
more than one word. 
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2: ORGANIZE 


Group the keywords into 
separate lists for the different 
sections or categories of your 
website. 


For example, if your website 
was a pet shop you might have 
different categories for different 
animals (such as dogs, cats and 
rabbits). 


Ona large site you may 

break this up further into 
sub-categories (for example, 
separate groups for different pet 
food brands). 


3: RESEARCH 


There are several tools that let 
you enter your keywords and 
then they will suggest additional 
keywords you might like to 
consider, such as: 
adwords.google.co.uk/ 
select/KeywordToolExternal 
(When using this tool, select the 
"exact match" option rather than 
"broad match.") 
www.wordtracker.com 
www.keyworddiscovery.com 


Once these tools have suggested 
additional keywords, add the 
relevant options to your lists. 
(Keyword tools will most likely 
suggest some terms that are 
irrelevant so do omit any that do 
not seem appropriate). 


4: COMPARE 


It is very unlikely that your 

site will appear at the top of 
the search results for every 
keyword. This is especially true 
for topics where there is a lot 
of competition. The more sites 
out there that have already been 
optimized for a given keyword, 
the harder it will be for you to 
rise up the search results when 
people search on that term. 


Some of the keyword research 
sites can tell you how many 
people have searched for a 
specific keyword to help you 
know how much competition 
those terms have. 


You can also use Google's 
advanced search feature to 
just search the titles of web 
pages. This will help you to 
determine how many sites have 
that keyword in the title of their 
pages. (The more pages with 
the term in the title, the more 
competition there is.) 


5: REFINE 


Now you need to pick which 
keywords you will focus on. 
These should always be the ones 
that are most relevant to each 
section of your site. 


If there is a phrase that is very 
relevant but you find there is a 
lot of competition, you should 
still use it. To improve the 
chances of your site being found 
you can look at whether there 
are other words that could be 
incorporated into a phrase. For 
example, if the information or 
service you offer on your website 
is location specific, then you will 
often find that incorporating 
your location into your keyword 
list will help people find you. 


If your site is promoting a slate 
roofing company in Australia 
then it is better to get 100 
people from Australia who are 
looking for a slate roof than 
10,000 from the USA who are 
looking for other kinds of rooves. 


6: MAP 


Now that you have a refined list 
of keywords, you know which 
have the most competition, and 
which ones are most relevant, 
it is time to start picking which 
keywords you will use for each 
page. 


Pick 3-5 keywords or phrases 
that map to each page of your 
website and use these as the 
keywords for each page. 


You should not need to repeat 
the same keywords on all of 
the pages. It is also likely that, 
as you move further away from 
the homepage into the sections 
of the site, the keywords will 
become more specific to the 
individual topic dealt with on 
each page. 
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ANALY TICS: LEARNING 
ABOUT YOUR VISITORS 


As soon as people start coming to your site, you can start analyzing 
how they found it, what they were looking at and at what point they are 
leaving. One of the best tools for doing this is a free service offered by 
Google called Google Analytics. 


SIGNING UP HOW IT WORKS THE TRACKING CODE 

The Google Analytics service Every time someone loads a A tracking code is provided 
relies on you signing up for an page of your site, the tracking by Google Analytics for each 
account at: code sends data to the Google website you are tracking. It 
www.google.com/analytics servers where it is stored. should appear just before the 
The site will give you a piece of Google then provides a web- closing </head> tag. The code 
tracking code which you need to based interface that allows you does not alter the appearance of 
put on every page of your site. to see how visitors use your site. your web pages. 


At the time of writing, Google 
was updating their Analytics 
interface to Version 5. If you 

log into your account and see a 
different interface, look for a link 
in the top right-hand corner of 
the page that says 'New Version.’ 
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HOW MANY PEOPLE ARE 
COMING TO YOUR SITE? 


The overview page gives you a snapshot of the key information you are 
likely to want to know. In particular, it tells you how many people are 


coming to your site. 


VISITS 

This is the number of times 
people have come to your site. If 
someone is inactive on your site 
for 30 minutes and then looks at 
another page on your site, it will 
be counted as a new visit. 


Google Analytics 


UNIQUE VISITS 

This is the total number of 
people who have visited your site 
over the specified period. The 
number of unique visits will be 
lower than the number of visits 

if people have been returning to 
your site more than once in the 
defined period. 
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PAGE VIEWS 
The total number of pages all 
visitors have viewed on your site. 


PAGES PER VISIT 

The average number of pages 
each visitor has looked at on 
your site per visit. 


AVERAGE TIME ON SITE 
The average amount of time 
each user has spent on the site 
per visit. 


DATE SELECTOR 

Using the date selector in the top 
right hand corner of the site, you 
can change the period of time 
the reports display. When you 
log in, this is usually set to the 
last month, but you can change 
it to report on a specific time 
period. 


EXPORT 

The export link just above the 
title that says "visitors overview" 
allows you to export the 
statistics on this page for other 
applications such as Excel. 
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WHAT ARE YOUR VISITORS 
LOOKING AT? 


The content link on the left-hand side allows 
you to learn more about what the visitors are 
looking at when they come to your site. 


PAGES 

This tells you which pages your 
visitors are looking at the most 
and also which pages they are 
spending the most time on. 


BOUNCE RATE 

This shows the number of people 
who left on the same page that 
they arrived on. A high bounce 
rate suggests that the content is 
not what they were looking for or 
that the page did not sufficiently 
encourage them to look around 
the rest of the site. What counts 
as a bounce: 


® Clicked a link to another site 
* Clicked on an advertisement 
9 Entered a new URL 

* Used the "back" button 


® Closed the browser 
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LANDING PAGES 

These are the pages that people 
arrive on when first visiting your 
site. This can be particularly 
helpful because you may find 
people are not always coming 
into your site via the homepage. 
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TOP EXIT PAGES 

This shows which pages people 
most commonly leave from. If 
a lot of people are leaving from 
the same page then you might 
consider changing that page or 
improving it. 
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REFERRERS 

This shows the sites that have 
linked to you and the number 

of people who have come via 
those sites. If a site sends a lot 
of traffic to you, get in touch and 
try to work together to ensure 
that traffic keeps flowing. You 
could also try to find similar 
sites and ask them to link to you. 


Google Analytics 
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WHERE ARE YOUR 
VISITORS COMING FROM? 


erettaee&, 


The traffic sources link on the left hand side 
allows you to learn where your visitors are 


coming from. 


DIRECT 

This shows which page a user 
arrived on if they did not come 
via a link on another site. They 
might have typed the URL into 
their browser, used a browser 
bookmark, or clicked a link in an 
email, PDF, or Word document. 
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SEARCH TERMS 

This shows the terms users 
entered into a search engine 

to find your site. This can help 
you learn how visitors describe 
what they're looking for (which is 
often different to how someone 
might describe their own site). 
This can help you fine-tune your 
content and your SEO keywords. 


ADVANCED FEATURES 
We have only scratched the 
surface of what you can find 

out about your visitors from 
Google Analytics. Their help 
files tell you many more of the 
advanced features. If you run 

an online shop, it is well worth 
looking at their e-commerce 
tracking, which adds information 
about products sold, average 
basket size and much more. 

You can also set up goals where 
you specify the paths you want 
people to take, and then see how 
far they get through those paths, 
which is especially useful when 
gathering data from users. 
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DOMAIN NAMES 
& HOSTING 


In order to put your site on the web you will 
need a domain name and web hosting. 


DOMAIN NAMES 


Your domain name is your web 
address (e.g. google.com or bbc. 
co.uk). There are many websites 
that allow you to register domain 
names. Usually you will have to 
pay an annual fee to keep that 
domain name. 


These sites usually have a form 
that allows you to check whether 
your preferred domain name is 
available, and because millions 
of domain names have already 
been registered, it might take 
you a while to find the one that is 
right for your site. 


A lot of sites that offer domain 
name registration also offer web 
hosting. 
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WEB HOSTING 


So that other people can see 
your site, you will need to upload 
it to a web server. Web servers 
are special computers that are 
constantly connected to the 
Internet. They are specially set 
up to serve web pages when 
they are requested. 


With the exception of some very 
large sites, most websites live on 
web servers run by web hosting 
companies. This is usually far 
cheaper and more reliable than 
trying to run your own web 
servers. 


There are lots of different types 
of hosting on offer. We will now 
take a look at some of the key 

things that will help you choose 
which hosting company to use. 


DISK SPACE 

This refers to the total size of all 
of the files that make up your site 
(all of the HTML and CSS files, 
images and scripts). 


BANDWIDTH 

This is the amount of data the 
hosting company will send to 
your site's visitors. If you imagine 
10 people looked at every page 
on your site, then it would be 

the equivalent to 10 times the 
amount of disk space you use. 


BACKUPS 

Check whether the hosting 
company performs backups on 
your site (and how often). Some 
only create backups so that 
they can restore your website in 
the event of a server breaking. 
Others allow access to backups 
(which can be helpful if you 
accidentally break the site when 
updating it). 


EMAIL ACCOUNTS 

Most hosting companies will 
provide email servers with their 
web hosting packages. You will 
want to check the size of mailbox 
you are allowed and the number 
of mailboxes you can use. 


SERVER-SIDE 
LANGUAGES AND 
DATABASES 

If you are using a content 
management system, it will likely 
use a server-side programming 
language and a database (such 
as PHP with a MySQL database, 
or ASP.Net with a SQL Server 
database). Be sure to check that 
your hosting company supports 
the technologies your software 
needs to run. 


It is often worth searching for 
reviews of a hosting company 

to see what other people's 
experience has been with a 
hosting company. Unfortunately, 
you often can only tell how good 
a hosting company is when 
something goes wrong, at which 
point you find out how they are 
able to help you (so you can 
expect to see a few negative 
reviews for any company). 


HOSTED SERVICES 


There are a number of online 
services that allow you to point 
your domain name to their 
servers. Blogging platforms such 
as WordPress.com, Tumblr, 

and Posterous, or e-commerce 
platforms such as Big Cartel and 
Shopify provide the servers that 
your site is hosted on. If you are 
using a platform like this you 
will not need your own hosting 
for the website, although you 
often still need hosting for your 
email. If this is the case, some 
web hosting companies offer 
packages that will just offer 
email services. 
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FIP& THIRD PARTY TOOLS 


To transfer your code and images from your 
computer to your hosting company, you use 
something known as File Transfer Protocol. 


As the name suggests, File 
Transfer Protocol (or FTP) allows 
you to transfer files across the 


Internet from your computer to Sean "o Pl ose Sa eon 1| | 
È home mmi 162 01/08/2011 162 03/08/2081 
the web server hosting your site. | lA Er side Cred 


There are many FTP programs 
that offer a simple interface 

that shows you the files on your 
computer alongside the files that 
are on your web server. These 
allow you to drag and drop n 
files from your computer to the 
server or vice versa. 
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Some hosting companies offer 
tools to upload files to their 
servers using a web browser, but 
itis more common to use an FTP 
program as they are faster at 
transmitting files. 


When you purchase your web 
hosting, you will be given FTP 
details that you enter into your 
FTP program in order to connect 
to the server. Usually this will 
be an address (such as ftp: // 
mydomain.com), a username, 
and a password. It is important 
to keep this information secure 
in order to prevent strangers 
from gaining access to your 
server. 


There are a wide variety of sites that offer 
services commonly created by web developers 
(to save you having to build them yourself). 


Here is a list of some popular 


FTP applications: 


FileZilla 


filezilla-project.org 


Windows, Mac, Linux 


FireFTP 
fireftp.mozdev.org 
Windows, Mac, Linux 


CuteFTP 
cuteftp.com 
Windows, Mac 


SmartFTP 
smartftp.com 
WIndows 


Transmit 
panic.com/transmit 
Mac 


Here is a list of some popular 
third party tools: 


BLOGS 
wordpress.com 
tumblr.com 
posterous.com 


E-COMMERCE 
shopify.com 
bigcartel.com 
go.magento.com 


EMAIL NEWSLETTERS 
campaignmonitor.com 
mailchimp.com 


SOCIAL NETWORKING 
SHARING BUTTONS 
addthis.com 
addtoany.com 
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Search engine optimization helps visitors find your 
sites when using search engines. 


Analytics tools such as Google Analytics allow you to 
see how many people visit your site, how they find it, 
and what they do when they get there. 


To put your site on the web, you will need to obtain a 
domain name and web hosting. 


FTP programs allow you to transfer files from your 
local computer to your web server. 


Many companies provide platforms for blogging, email 
newsletters, e-commerce and other popular website 
tools (to save you writing them from scratch). 


> A-Z 
> HTML & CSS shortcuts 
> Troubleshooting 


# symbol (links) 87, 88 

_blank 86 
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12 column grid 387-390 
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abbreviations 53 
above the fold 379 
absolute positioning 363, 367 
absolute URLs 79 
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alt text 99, 272, 480 
contrast 253, 420 
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labelling form controls 163 
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acronyms 53 
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igning form controls 345 
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ascender 268, 283 
attributes 25, 26, 38 
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background property 344 
background images 413-416 
background colors 138, 250 
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background gradients 419 
backups 487 
bandwidth 487 
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bgcolor attribute 138 
blinking text 282 
block elements 102, 185, 317, 
229, 361 
blueprint css 391 
bold text 45 
«b» 45 
font-weight property 279 
«strong» 51 
borders 
border attribute 138 
border (CSS shorthand) 312 
color 311 
design 469 
images 319 
radius 321 
spacing 340 
style 310 
width 309 
bottom property 366-371 
bounce rate 485 
boxes 300-327 
borders 309-312, 321 
design 469 
box offsets 364, 364-371 
box-shadow property 320 
centering boxes 315 
circles 322 
elliptical shapes 322 
float 370-375 
hiding content 317, 318 
IE6 box model 316 
margin 307,314 
max-height property 305 
min-height property 305 
overflow property 306 
padding 307, 313 
positioning schemes 367-375 
rounded corners 321 
visibility property 318 
box offsets 364, 364-371 
bottom 366-371 
left 366-371 
right 366-371 


top 366-371 
box-shadow property 320 
brightness 252 
bring to front 369 
browser quirk 242 
bulleted lists 65 
list-style-type property 333 
position of marker 335 


C 


cache control 192 
cap height 268 
capitalize 281 
carriage returns 48 
cascade in CSS 239 
centering boxes 315 
centering images 412 
centering layouts 315 
centering text 285 
changes to content 
«del» 56 
«ins» 56 
«s» 56 
checkboxes (forms) 155 
checked attribute 155, 156 
child folder 84 
child selector 238 
chunking / grouping 465 
ircles in CSS 322 
tations 52, 54 
te attribute 52 
ass attribute 184, 431 
ass selector 238 
ear property 372 
osing tag 20, 24 
osure 469 
codecs attribute 215 
code editors 29, 31-34, 49 
color 246-261 
background color 250 
bgcolor attribute 138 
border color 311 
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color names 249, 252 
color pickers 251 
color values for CSS 251 
contrast 253, 420 
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design 467, 469 

hex codes 249, 252 

hsl / hsla 255-256 

hue 252, 255 

lightness 255 

opacity 254 

rgb values 249, 252 

rgba 254 

saturation 252, 255 

selecting a color 251 
cols attribute 154 
colspan attribute 133 
columns (layout) 375-376 
comments in HTML 182 
comments in CSS 249 
conditional comments 442 
containing elements 362 
content attribute 191-192 
content management system 

(CMS) 33-34 

code view 34 

templates 81 

visual view 34 


continuance 469 
contrast 253, 420 
controls attribute 214, 219 
copyright symbol 194 
cropping images 113-114 
CSS 226-425 
@import rule 395 
limportant 239 
attribute selectors 292 
background images 413-419 
borders 309-321 
boxes 300-327 
box offsets 366-371 
bugs and browser quirks 242 
clearing floats 372 
colors 249, 252, 255-256 
CSS1, CSS2, CSS3 (versions) 
242 
CSS3 8 
declaration 231-232 
frameworks 391 
cursor styles 347 
external style sheets 235 
external vs internal style 
sheets 241 


float 364, 370-375 
float (images) 411 
fonts 271-280 
height 303, 409-410 
hiding content 317-318 
how CSS works 229-232 
how rules cascade 239 
inheritance 239 
internal style sheets 236 
layout 358-405 
links 290-291 
lists 333-336 
margins 314 
multiple style sheets 395 
padding 313, 337 
positioning boxes 363-367 
properties and values 231 
pseudo-classes 289-290 
rules 231-232 
selectors 231-232, 237-238, 
292 
style attribute 236 
<style> element (for internal 
CSS) 236 
tables 337-340 
text 282-297 
vertical-alignment 286 
what CSS is 6 
what style an element is using 
348 
width 303, 337, 371, 409-410 
cufon (typefaces) 272 
currency symbols 194 
cursive typefaces 270 
cursor styles 347 
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dashed borders 310 
databases 149, 488 

date input 166 

default pages 81, 82 

defining intsance of a term 54 
definition lists 67 

definitions 54 

descendant selector 238 


descender (typefaces) 268, 283 


description attribute 191 


design 452-473 
960 pixel grid 387-390, 
391-394, 463 
above the fold 379 
chunking / grouping 465 
columns 387-390 
consistency 470 
fixed-width layouts 381, 
383-384 
getting your message across 
65-466 
grouping and similarity 
69-470 
information hierarchy 465- 
466 
layout 358-405 
liquid layouts 382, 385-386 
screen sizes and resolution 
377-378 
site maps 461 
target audience 455 
visitors' motivation 457 
visual hierarchy 465, 467-468 
web page sizes 379-380 
what information visitors need 
459 
wireframes 463-464 
digital rights management 213 
dimensions of boxes in CSS 303 
directory structure 81-84 
images 98 
direct traffic 486 
diskspace 487 
display property 317 
division symbol 194 
DOCTYPE declarations 181 
domain name 10, 487 
Domain Name System (DNS) 
9,10 
dotted borders 310 
drop down list box 157 
drop shadows 288, 320 
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e-commerce 33 
editing content 
«del» 56 
«ins» 56 
<s> 56 
editing images 108 
editing pages in a CMS 33 
elements 52 
definition of 20, 24, 38 
diagram of 23, 24 
elliptical shapes 322 
email input 167 
email links 85 
embossed borders 310 
emphasis 51 
empty-cells property 339 
empty elements 48 
ems (for font sizes) 274, 276 
ems (unit of measurement 
boxes) 303 
encoding 209 
entity references 193-194 
equality selector 292 
escape characters/codes 
193-194 
existence selector 292 
exit pages 485 
expires (meta information) 192 
external style sheets (when to 
use) 241 
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fantasy typefaces 270 
file input / upload box 159 
fixed positioning 364, 368 
fixed width layouts 381, 
383-384 
flash 200-223 
adding a flash movie to your 
page 207-208 
declining usage 204 
flash movies 203 
flash player 203 
flashvars 212, 218 
flash video 211 


INDEX 


how flash works 203 
params 218 
swfobject 207-208, 211, 218 
uses of 204 
flash of unstyled content 278 
float property 364, 370-375 
float property (images) 411 
FLV (video format) 211 
folder structure 81-84 
images 98 
fonts 
choosing a typeface 269 
font sizes 276 
fontsquirrel.com 277 
specifying a font 273 
preferences / font stack 269 
styles / terminology 267-268 
type scales 275 
weights 268 
font-face property 271 
font-family property 271, 273 
font-size property 274, 276 
font-weight property 279 
for attribute 163 
foreground color 249 
forward slash 24, 48, 84 
formatting code 47 
forms 144-173 
how forms work 149-150 
what HTML forms are 145 
where to position labels 163 
why use forms 147 
<button> 162 
<fieldset> 164 
<form> 151 
«input» 155, 159, 160-162, 166 
«label» 163 
«legend» 164 
«option» 157 
<select> 157 
<textarea> element 154 
type attribute 155 
type="checkbox" 156 
type="date" 166 
type="email" 167 
type="file" 159 
type="hidden" 162 
type-"image" 161 


type="radio" 155 
type="search" 168 
types of form control 148 
type="submit" 160 
type="text" 152 
type="url" 167 
action attribute 151 
checked attribute 155, 156 
cols attribute 154 
for attribute 163 
id attribute 151, 163 
maxlength attribute 152 
method attribute 151 
multiple attribute 158 
name attribute 152, 155, 156, 
157,160 
rows attribute 154 
selected attribute 157 
size attribute 152, 158 
value attribute 155, 156, 157, 
160 
aligning form controls 345 
changing submit button on 
hover 343 
form validation 165 
get method 151 
grouping form elements 164 
hidden form controls 162 
hover styles 342 
image buttons 161 
name/value pairs 150 
placeholder text 168 
rounded corners on text inputs 
342 
styling with CSS 341-346 
submit button 160 
form validation 165 
frameborder attribute 190 
FTP 489-490 
full screen layouts 382 
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general sibling selector 238 
GIF 111 
animated GIFs 117 
GIMP 108 
global attributes 183 


Google analytics 483-486 
Google maps 189 
Google web fonts 277 
gradients 419 
greater than symbol 194 
grids 387-390, 463 
grouping and similarity 469, 
469-470 
grouping / chunking 465 
grouping elements (<div>) 187 
grouping inline elements 
(<span>) 188 
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hCard 55 
headings 22, 43 
<hgroup> 438 
height attribute 100, 214 
height property 303 
height property (images) 
409-410 
height iframe 189 
hex codes 249, 252 
hidden form controls 162 
hiding content 317, 318 
home pages 81, 82 
horizontal rules 48 
hosted video 210 
href 77, 79, 88, 235 
hsl / hsla 255-256 
HTML 
what is HTML? 6 
HTML 4 179 
HTML5. 179 
DOCTYPE declaration 181 
differences from XHTML 179 
HTML5 179 
Comparison with HTML 4 179 
«a» (HTML5 block level links) 
44] 
«article» 432-439 
«aside» 436 
«audio» 217-220 
«figcaption» 119, 422, 439 
«figure» 119, 422, 439 
«footer» 432 
«header» 432, 433 


<hgroup> 438 

«nav» 432, 434 

«section» 433, 437 

«source» 215, 220 

<video> 213-216 

autoplay attribute 219 

controls attribute 219 

loop attribute 219 

preload attribute 219 

scrolling attribute 190 

seamless attribute 190 

src attribute (audio) 219 

date input 166 

email input 167 

search input 168 

URL input 167 

form validation 165 

placeholder text 168 

helping older browser 

understand 442 

HTMLS5 shiv / shim 442 

layout 428-449 
HTMLS5 layout 428-449 
HTTP 

get method 151 

post method 151, 159 

HTTP headers 151 


Secure Sockets Layer (SSL) 


153 
http-equiv attribute 192 
hue 252, 255 


id attribute 87, 88, 151, 163, 183 


id attribute (layout) 431 

id selector 238 

IE6 box model 316 

image button 161 

image resolution 115 

images 95-120 
«img» 99,100 
<figcaption> 439 
«figure» 119, 439 
src attribute 99 
alttext 99, 480 


aligning images 103-105, 4 
aligning images with CSS 411 
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background-images 413-416 
(gradients) 419 
indenting text 287 
border-images 319 
bullet points 334 
choosing images and stock 
photography 97 
copyright 97 
cursors 347 
dimensions 100, 107, 113-114 
in CSS 409-410 
editing images 108, 113-114, 
116, 117 
image formats 107 
animated GIFs 117 
bitmap 115 
GIF 111, 115, 118 
JPEG 109-110, 115 
PNG 112,115, 118 
SVG 116 
transparent GIE/PNGs 118 
vector formats 116 
resolution 107, 115 
orientation (landscape/ 
portrait) 114 
position in surrounding text 
101 
preparing for the web 107 
rollovers 417 
sprites 417 
titles 99 
indenting code 47 
indenting text 287 
index.html 81, 82 
information hierarchy 465-466 
inheritance (CSS) 239 
inline elements 102, 186, 229, 
317, 361 
Internet Service Provider (ISP) 
10 
IP address 10 
italic text 45 
<em> 5] 
font-style property 280 
«i» 45 
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JavaScript 208, 212, 218 
JPEG 109, 109-112 
justify 285 
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kerning 284 
keywords 191, 479-482 
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labelling form controls 163 
landing pages 485 
lang attribute 25 
layer order 369 
layout 358-405 
960 pixel grid 387-390, 391 
absolute positioning 363 
box offsets 364 
centering boxes 315 
columns 371-376, 387-390 
design 452-473 
<div> 431, 440 
fixed positioning 364 
fixed width layouts 381, 
383-384 
float 364 
grids 387-397 
helping older browsers 
understand HTML5 442 
liquid layouts 382, 385-386 
normal flow 363, 365 
positioning schemes 
absolute positioning 367 
fixed positioning 368 
floats 
clearing floats 372 
normal flow 365 
relative positioning 366 
position property 365 
sidebars 436 
page sizes 379-380 
z-index property 364 
leading 283 
left property 366-371 
less than symbol 194 
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letter-spacing property 284 
lightness 255 
like buttons 490 
line breaks 48 
line-height property 283 
line items (lists) 65, 66 
links 75 
<a> 77,79 
href attribute 77 
:active 291 
‘focus 291 
:hover 291 
‘link 290 
‘visited 290 
add / remove underline 282 
ink opens in new window 86 
ink to a part of a page 87 
ink to an email address 85 
ink to other sites 79 
ink to the same site 80 
ink to top of page 87 
ink text 78, 479, 480 
# symbol 87, 88 
liquid layout 382, 385-386 
min and max width 304 
lists 
definition lists 67 
nested lists 68 
ordered lists 65 
unordered lists 66 
<ol> 65 
<ul> 66 
<li> 65 
<dd> 67 
<dl> 67 
<dt> 67 
bullet or number styles 333- 
336 
gaps between list items 334 
displaying items side by side 
317 
using images for bullet points 
334 
list-style-image property 334 
list-style property 336 
list-style-type property 333 
loop attribute 214, 219 
lowercase 281 
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mailto: 85 
margin:auto 315 
margin property 314 
margin-top property 314 
margin-right property 314 
margin-bottom property 314 
margin-left property 314 
markers in lists 333 
markup (definition) 41 
mathematical symbols 194 
max-height property 305 
max-length attribute 152, 153 
max-width property 304 
meta descriptions 480 
meta information 191-192 
method attribute 151 
min-height property 305 
min-width property 304 
mobile devices 377 
monospace typefaces 267-270 
multiple attribute 158 
multiple browsers (testing) 242 
multiple columns 375-376 
multiple languages 25 
multiple style sheets 395 
music 217-220 

mp3 player 218 
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name attribute 152, 153, 155, 
156, 157, 160, 191 
names for attributes 25, 26 
navigation 
<a> 77,79 
<a> (HTMLS5 block-level links) 
441 
designing navigation 471-472 
<nav> 432, 434 
using lists for navigation 317 
nested elements 362 
nested lists 68 
new window 86 
nofollow (stop search engines 
indexing) 191 
normal flow 363, 365 


notepad 29-30 
notepad++ 29 


O 


oblique text 280 

Ogg Vorbis (audio format) 220 

opacity 254 

opening tag 20, 23 

open source fonts 277 

ordered lists 65 

overflow property 306 

overlapping content 306 

overlapping elements 
z-index property 369 

overline 282 


P 


padding property 313 
padding-top property 313 
padding-right property 313 
padding-bottom property 313 
padding-left property 313 
padding property (tables) 337 
page sizes 379-380 
page titles 27, 28, 480 
page views 484 
paragraphs 44 
parent elements 362 
parent folder 84 
password input (forms) 153 
PC (creating pages on) 29 
percentages (font sizes) 274, 
276 
percentages (boxes) 303 
Photoshop 108, 117 
PHP 149, 488 
pixels (images / resolution) 115 
pixels (unit of measurement) 
274, 276, 303 
placeholder attribute 168 
PNG 112 
transparent PNGs 118 
positioning schemes 363 
normal flow 363, 365 
relative positioning 363, 366 
absolute positioning 363, 367 


fixed positioning 364, 368 
float 364, 370-375 
position property 365, 366, 367 
poster attribute 214 
post method 151, 159 
pragma (meta information) 192 
prefix selector 292 
preload attribute 214, 219 
process (design process) 
452-473 
properties (see CSS Properties) 
proximity 469 
pseudo-classes 289 
‘active 291 
‘focus 291 
:hover 291 
‘link 290 
‘visited 290 
pseudo elements 
first-line 289 
:first-letter 289 


Q 


quotations 
<blockquote> 52 
cite attribute 52 
<q> 52 

quote marks 194 

quotes 
quote marks 194 


R 


radio buttons (forms) 155 

referrers 486 

relative positioning 363, 366 

relative URLs 80, 83 

rel attribute (CSS) 235 

resizing images 113-114 

resolution (images) 107 

resolution and screen sizes 
377-378 

rgb values 249, 252 

rgba 254 

right property 366-371 

robots (meta information) 191 

rollover buttons 343 


rollover images 417 

root folder 82 

rounded corners 321 

rounded corners on form 
elements 342 

rows attribute 154 

rowspan attribute 134 


9 


sans-serif typefaces 267-270 
saturation 252, 255 
Scalable Vector Graphics (SVG) 
180 
screen readers 
what screen readers do 7 
alt text 272 
alt text for images 99 
interpreting semantic markup 
50 
link text 78 
screen sizes and resolution 
377-378 
scrolling attribute 190 
scroll value (overflow property) 
306 
seamless attribute 190 
Search Engine Optimization 
(SEO) 479-482 
alt text 480 
Google keyword tool 481 
headings 480 
keywords 479-482 
link text 78, 479, 480 
meta keywords 191 
meta descriptions 480 
off-page techniques 479 
on-page techniques 479-480 
page names / URLs 480 
page titles 480 
preventing pages being 
indexed 191 
search terms 486 
secure sockets layer (SSL) 153 
select box 157-158 
selected attribute 157 
selectors (CSS) 237, 292 
semantic markup 41, 50 
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send to back 369 
serif typefaces 267,267-270 
shading alternate table rows 
338 
sifr (typefaces) 272 
site maps 461-462 
size attribute 152, 153, 158 
size of boxes in CSS 303 
social networking buttons 490 
space selector 292 
sprites 417 
src attribute 99,189 
src attribute (audio) 219, 220 
src attribute (video) 214, 215 
stacking context 369 
strikethrough 56, 282 
structural markup 41 
structure 
how documents use structure 
15 
how HTML describes structure 
20, 21 
using word processors 17 
style attribute 236 
submit button 160 
styling buttons with CSS 343 
subscript 46 
substring selector 292 
suffix selector 292 
superscript 46 
SVG 116, 278 
swfobject 207-208, 211, 218 


T 


tables 126-141 
<table> 131 
<tbody> 135 
<td> 131 
<tfoot> 135 
<thead> 135 
<th> 132 
<tr> 131 
bgcolor attribute 138 
border attribute 138 
colspan attribute 133 
padding property (tables) 337 
rowspan attribute 134 
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width attribute 137 
styling tables in CSS 337-340 
border-collapse property 340 
border-spacing property 340 
empty-cells property 339 
adding/removing gaps 
between cells 340 
highlighting table rows 337 
shading alternate rows 338 
what is a table 130 
why use tables 127 
tags 20-24, 38 
target attribute 86 
target audience 455 
templates (in a CMS) 33, 34, 81 
text 
‘active pseudo-class 291 
‘focus pseudo-class 291 
:hover pseudo-class 291 
:first-letter pseudo element 
289 
‘first-line pseudo element 289 
@font-face 277 
aligning text 285-286 
blinking text 282 
choosing a typeface 269 
drop shadows 288 
formats 278 
font stack 269 
indenting 287 
kerning/letter-spacing 284 
leading/line-height 283 
open source fonts 277 
specifying a font 273 
size 274 
typefaces 267-270 
type scales 275 
underline 282 
uppercase/lowercase 281 
underline 282 
weight 268,279 
word-spacing 284 
text-align property 285 
text color 249 
text-decoration property 282 
textedit 31-32 
text editors 29, 31 
text in CSS 264-297 


text-indent property 287 
text-shadow property 288 
text-transform property 281 
textwrangler 31 
title attribute 53, 99 
tools 
960 pixel grid 387 
blogs 490 
CSS frameworks 391 
e-commerce 490 
email newsletters 490 
Google analytics 483-486 
Google keyword tool 481 
HTMLS5 shiv / shim 442 
social networking buttons 490 
web developer toolbar 348 
top of page links 87 
top property 366-371 
tracking visitors 483 
trademark symbol 194 
transparency (images) 118 
transparecny 256 
type attribute 152, 153, 155, 159, 
236 
type attribute (audio) 220 
type attribute (CSS) 235-236 
type attribute (video) 215 
typefaces 267-272 
typekit.com 277 
type scales 275 
type selector 238 


U 


underline 56, 282 
Uniform Resource Locators 
(URLs) 82 
absolute URLs 79 
relative URLs 80 
directory structure 81 
universal selector 238 
unordered lists 66 
uploading web pages 489-490 
uppercase 281 
URLs 
Search Engine Optimization 
(SEO) 480 
URL input 167 


V 


value attribute 155, 156, 157, 160 
values for attributes 25, 26 
vector images 116 
vertical-align property 286 
vertical alignment of images 
105-106 
vertical margins 308 
video 200-223 
<video> 209 
hosted services or self-hosting 
210 
digital rights management 213 
encoding 209 
flash video (FLV) 211 
formats 213-216 
AVI, Flash Video, h264, 
MPEG, Ogg theora, 
QuickTime, WebM, 
Windows Media 209 
players and plugins 209 
src attribute 214 
view source 35, 162, 317, 318 
Vimeo 210 
visibility property 318 
visitors 
referrers 486 
tracking 483 
visitors / visits / unique visits 
484 
visual editors in a CMS 34, 49 
visual hierarchy 465, 467, 
467-468 


W 


wallpaper (images) 414 
watermark (images) 414 
web browsers 7 
testing in multiple browsers 
242 
view source 35 
web developer toolbar 348 
web hosting 7, 9, 487 
email accounts 488 
web page layout 358-405 
web pages 


exit pages 485 
landing pages 485 
referrers 486 
uploading to a web server 
489-490 
web page sizes 379-380 
web servers 7,9,10, 81, 84 
white space 308, 469 
margin and padding 307 
padding property 313 
margin property 314 
gaps between list items 334 
white space collapsing 47, 308 
white space handling in HTML 
47 
width attribute 100, 137, 189, 
214 
width property 303 
width property (floating 
elements) 371 
width property (images) 
409-410 
width property (tables) 337 
wireframes 463-464 
word-spacing property 284 


X 


x height 268 

XHTML 179 
differences from HTML 179 
DOCTYPE declaration 181 
Strict/Transitional XHTML 

180 

XML 180 

XML declaration 181 


Y 


YouTube 210 


Z 


zaxis 369 
z-index property 364, 369 
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TROUBLESHOOTING 


Here are a few problems that beginners commonly face, along with the 
pages where you can find solutions to them. 


STARTING OUT 


The browser shows the markup 
typed in (not the result page). 
Check the file extension is .html 
and not .txt. p 30, 32 


Bold text, italics, headings, or 
link text are extending longer 
than expected. 

Check you have closed the 
relevant tag e.g. </a>. p 21, 22 


The page | linked to is not found. 
Check the relative URL. p 83, 84 


IMAGES 


Images are not showing up. 
Check the relative URL. p 83, 84 


Images are looking blurry. 
Check that you have saved your 
images in the right format and at 
the size you want to show them 
at. p 109-113 


Border images are not showing. 
This only works with latest 
browsers. (Also, check the 
relative URL). p 319, 21, 22 


GIFs that were resized now look 
grainy or have jagged edges. 
Check the color space in your 
image editing program. It should 
be RGB (not indexed color). 
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TEXT 


Some text flashes up before 
showing the correct font. 
You have a Flash Of Unstyled 
Content. p 278 


When copying text from word 
processors, lots of extra tags are 
added to the markup. 

Copy the text into a plain text 
editor (to remove formatting) 
then paste it into your HTML 
editor. p 49 


The text looks bigger/smaller on 
some screens. 

This is usually due to variances 

in screen resolutions. Also, 
check the type scale is set for the 
<body> element. p 377, 276 


The font size is wrong in IE when 
| use ems. 
See above. p 276 


The font | specified is not 
showing in some browsers. 

The computer must have that 
font installed. p 269-272 

If you are use @font-face it must 
be in several formats. p 341 


My fonts look jagged on a PC. 
Some fonts to do not anti-alias 
as well as others on a PC. Try a 
different typeface or try a thicker 
version. p 272 


GENERAL CSS 


A specified style is not showing. 
Remember CSS selectors are 
case sensitive. 


Check that your selectors are 
correct. p 238 


The web developer toolbar can 
help you find the right selector. 
p 348 


If the selectors are correct, do 
you have another selector that 
applies to the same element 
later in the CSS? p 239, 240 


CSS varies in some browsers. 
There are a number of CSS 
bugs/browser quirks that mean 
they render the page slightly 
differently - try searching for the 
problem and see if it is a known 
CSS bug/quirk. p 242 


HTML 5 


The browser is not applying 
styles to HTML5 elements. 

If itis IE, you might need to use 
the HTMLS5 shiv / shim. p442 


Block-level elements are 
rendering as inline elements. 
Use display:block to tell the 
browser which HTML5 elements 
are block-level elements. p 442 


LAYOUT 


The design looks bigger/smaller 
on some screens. 

The resolution of a monitor 
affects how big the items appear 
on the page. p 377, 378 


Margins above and below a box 
not showing. 


Vertical margins collapse. p 308 


My content does not fit in the 


containing box/browser window. 


You can deal with this using the 
overflow property. p 306, 316 


Boxes look a different size in IE. 
Some versions of IE use a 
different box model than all 
other browsers. Use a DOCTYPE 
declaration to make old versions 
of IE behave like other browsers. 
p 316 


Boxes do not appear centered 
when using auto for left and 
right margins. 

You may need to use the 
text-align property on the 
containing element. p 315 


Elements are overlapping. 

When you take elements out of 
normal flow, they can overlap. 
z-index helps you control which 
item goes on top. p 369 


Why is the vertical-align 
property not vertically centering 
my block-level element? 

This property is not designed for 
this purpose. It is used to center 
inline elements on the page. 

You will find several ways to 
vertically center block-level 
elements (depending on their 


context) if you search on Google. 


A background image is not 
showing on my box. 

Does the box you are applying 
the style to to have a defined 
height and width? p 303 


Does the containing box have an 
overflow property set to auto? 
p 373, 374 


My background images do not 
show when the page is printed. 
Most browsers do not print 
background images by default to 
help save ink. You can adjust this 
in your print preferences. 


There is a gap between the 
browser window and my 
content. 

You may need to set margin and 
padding on the <body> element 
to 0. p 313, 314 


FLOAT IN LAYOUT 


A box is not sitting next to 
another floated element. 
Ensure that there is enough 
space in the containing element 
for the two to sit side by side. 
p303 


Margins and padding are added 
to the width of the box (except 
for older versions of IE, which 
have a different box model). 
Therefore, the box might be 
wider than specified in the width 
property. p 316 


Did you specify a width for the 
floated element? (See next 
point.) 


My floated element takes up the 
full width of the browser window 
(or containing box). 

Check that you have specified 

a width for the floated element. 
pari 


The container around my floated 
elements are one pixel tall. 

The containing element doesn't 
know the height of the floated 
elements inside it. You can 
either add an element that acts 
as a clearing box or use the 
overflow property with a value 
set to auto. p 373 


IE added an extra margin to my 
floated elements. 

Set the display property to 
inline. 


If you've come across a problem 
that you think belongs in this 
troubleshooting section, please 
feel welcome to email it to us at: 
hello@htmlandcssbook.com. 
We will endeavor to address 
the most common problems 
our readers have faced in future 
editions of this book. Thank you! 
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HIML ELEMENTS 


«a» 77,79, 85, 441 
«abbr» 53 
«acronym» 53 
«address» 55 
«article» 432-439 
«aside» 436 
«audio» 217-220, 219 
«b» 45 
«blockquote» 52 
<body> 22,27 

«br /» 48 

«button» 162 

«cite» 54 

«dd» 67 

«del» 56 

«dfn» 54 

«div» 187, 431, 440 
«dl» 67 

«dt» 67 

<em> 5] 

«embed» 203 
«fieldset» 164 
«figcaption» 119, 422, 439 
«figure» 119, 422, 439 
«footer» 432, 433 
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«form» 151 

«hl» 22, 43 

«h2» 22,43 
«h3» 43 

«h4» 43 

«h5» 43 

«h6» 43 

«head» 27 
«header» 432, 433 
<hgroup> 438 
«hr/» 48 
«html» 22 

<i> 45 

<iframe> 189-190 
«img» 99,100 
«input» 152,155, 159- 162, 166 
«ins» 56 

«label» 163 
«legend» 164 
<li> 65, 66 
«link» 235, 396 
«meta» 191, 192 
«nav» 432, 434 
<object> 203 
<ol> 65 


<option> 157 

<p> 22,44 

<q> 52 

<s> 56 

<script> 208, 218 
<section> 433, 437 
<select> 157 
<source> 215, 220 
<span> 188 
<strong> 51 
<style> 236 
<sub> 46 

<sup> 46 

<table> 131 
<tbody> 135 

<td> 131 
<textarea> 154 
<tfoot> 135 

<th> 132 

<thead> 135 
<title> 27,28 

<tr> 131 

<u> 56 

<ul> 66 

<video> 209, 213-216 


action 151 

align 103-105 

alt 99 

autoplay 214, 219 
bgcolor 138 

border 138 

checked 155, 156 
cite 52 

class 184, 431 
codecs 215 

cols 154 

colspan 133 
content 191, 192 
controls 214, 219 
description 191 

for 163 
frameborder 190 
global attributes 183 
height 100, 189, 214 


href 77, 79, 88, 235 
http-equiv 192 

id 87, 88, 151, 163 
id attribute 183, 431 
loop 214, 219 
maxlength 152,153 
method 151 
multiple 158 

name 152-157, 160, 191 
placeholder 168 
poster 214 

preload 214, 219 
rel 235 

robots 191 

rows 154 

rowspan 134 
scrolling 190 
seamless 190 
selected 157 


HIML ATTRIBUTES 


size 152, 153, 158 

src 99, 189, 214, 215, 219, 220 
style 236 

target 86 

title 53, 99 

type 152,155, 159 

type (audio/video) 220, 215 
type (CSS) 235-236 
type="date" 166 
type="email" 167 
type="hidden" 162 
type-"image" 161 
type="password" 153 
type="search" 168 
type="submit" 160 
type="url" 167 

value 155-157, 160 

width 100, 137, 189, 214 
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CSS PROPERTIES 


background-attachment 
property 414 
background-color 250 
background-image property 413 
background-image property 
(gradients) 419 
background-position property 
415 
background property 416 
background-repeat property 
414 
border-bottom-color 311 
border-bottom-style 310 
border-collapse property 340 
border-color 311 
border-image property 319 
border-left-color 311 
border-left-style 310 
border property 312 
border-radius property 321 
border-right-color 311 
border-right-style 310 
border-spacing property 340 
border-style 310 
border-top-color 311 
border-top-style 310 


bottom property 366-371 
box-shadow property 320 
clear property 372 

color 249 

cursor property 347 

display property 317 
empty-cells property 339 
float property 364, 370-375 
float property (images) 411 
@font-face 277 

font-face 271 

font-family 271, 273 
font-size 274, 276 

font-style property 280 
height (images) 409-410 
hsl / hsla 255-256 

left property 366-371 
letter-spacing 284 
line-height 283 
list-style-image property 334 
list-style-position property 335 
list-style property 336 
list-style-type property 333 
margin-bottom property 314 
margin-left property 314 
margin property 314 


margin-right property 314 
margin-top property 314 
opacity 254 
padding-bottom property 313 
padding-left property 313 
padding property 313 
padding property (tables) 337 
padding-right property 313 
padding-top property 313 
position property 366, 367 
rgba 254 
right property 366-371 
text-align 285 
text-decoration 282 
text-indent 287 
text-shadow 288 
text-transform 281 
top property 366-371 
vertical-align 286 
visibility property 318 
width (images) 409-410 
width property (floating 
elements) 371 
width property (tables) 337 
word-spacing 284 
z-index property 364, 369 


PSEUDO-CLASSES, ELEMENTS & RULES 


‘active 291 
:first-letter 289 
‘first-line 289 
‘focus 291, 342 
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shover 291, 343, 342 
highlighting table rows 337 

‘link 290 

‘visited 290 


@font-face 277 
@import rule 395 
important 239 


